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.

Chat Message

Chat message bubble with role label, streaming indicator, and collapsible content

Ink OpenTUI

Terminal

                                                                               █
 chat-message-demo                                                             █
 Loading preview...                                                            █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █

Installation


$ pnpm dlx shadcn@latest add @termcn/opentui/chat-message

Usage

import { ChatMessage } from "@/components/ui/chat-message";

<ChatMessage sender="assistant" name="Claude" timestamp={new Date()}>
  Here is the refactored version of your function.
</ChatMessage>

API Reference

ChatMessage

Prop	Type	Default
`sender`	`"user" \| "assistant" \| "system" \| "error"`	`required`
`name`	`string`	-
`timestamp`	`Date`	-
`streaming`	`boolean`	`false`
`collapsed`	`boolean`	-
`children`	`ReactNode`	-

AI Chat Thread

On This Page

Installation Usage API Reference ChatMessage

Edit this page Follow @shadcnlabs Join community