A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink. 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.

App Shell

Full-screen TUI layout with header, tip bar, full-width input, scrollable content, and hints footer

Terminal

app-shell-demo

No opentui live preview is registered for this example yet.

Installation


$ pnpm dlx shadcn@latest add @termcn/app-shell

Usage

import { AppShell } from "@/components/ui/app-shell";

<AppShell>
  <AppShell.Header>
    <AppShell.Tip>Press Tab to autocomplete commands</AppShell.Tip>
  </AppShell.Header>
  <AppShell.Input
    placeholder="Enter a command..."
    prefix="$"
    onSubmit={(value) => console.log(value)}
  />
  <AppShell.Content height={16}>
    {/* scrollable output area */}
  </AppShell.Content>
  <AppShell.Hints items={["↑↓ scroll", "enter submit", "esc quit"]} />
</AppShell>

API Reference

AppShell

Prop	Type	Default
`children`	`ReactNode`	`required`
`fullscreen`	`boolean`	-

AppShell.Header

Prop	Type	Default
`children`	`ReactNode`	`required`

AppShell.Tip

Prop	Type	Default
`children`	`ReactNode`	`required`

AppShell.Input

Prop	Type	Default
`value`	`string`	-
`onChange`	`(value: string) => void`	-
`onSubmit`	`(value: string) => void`	-
`placeholder`	`string`	`"Type something..."`
`borderStyle`	`"single" \| "double" \| "round" \| "bold"`	`"single"`
`borderColor`	`string`	-
`prefix`	`string`	`">"`

AppShell.Content

Prop	Type	Default
`children`	`ReactNode`	`required`
`autoscroll`	`boolean`	-
`height`	`number`	`20`

AppShell.Hints

Prop	Type	Default
`items`	`string[]`	-
`children`	`ReactNode`	-

OpenTUI Templates Bullet List

On This Page

Installation Usage API Reference AppShell AppShell.Header AppShell.Tip AppShell.Input AppShell.Content AppShell.Hints

Edit this page Follow @shadcnlabs Join community