A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Conversation History

Arrow-key scrollable stack for long chat threads

Ink OpenTUI

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/ink/conversation-history

Usage

import { ConversationHistory } from "@/components/ui/conversation-history";
import { Text } from "ink";

<ConversationHistory maxHeight={12} isActive>
  <Text>user: Hello</Text>
  <Text>assistant: Hi — how can I help?</Text>
</ConversationHistory>

When isActive is true, ↑ / ↓ move the window over children. The view starts scrolled to the bottom (maxHeight lines visible).

API Reference

ConversationHistory

Prop	Type	Default
`maxHeight`	`number`	`20`
`children`	`ReactNode`	-
`showScrollHint`	`boolean`	`true`
`isActive`	`boolean`	`true`

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

Keyboard: Arrow keys move the current item or viewport; Home / End move to the boundaries; PageUp / PageDown move by a page; Enter / Space select or expand when supported; Tab / Shift+Tab leave the composite.
Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.

Chat Thread Error Retry

On This Page

Installation Usage API Reference ConversationHistory Notes Accessibility

Edit this page Follow @shadcnlabs Join community