Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/app-shell
Usage
import { AppShell } from "@/components/ui/app-shell";<AppShell>
<AppShell.Header>
<AppShell.Tip>
Press Tab to move between the command input and output
</AppShell.Tip>
</AppShell.Header>
<AppShell.Input
autoFocus
placeholder="Enter a command..."
prefix="$"
onSubmit={(value) => console.log(value)}
/>
<AppShell.Content height={16}></AppShell.Content>
<AppShell.Hints items={["tab focus", "enter submit", "↑↓ scroll"]} />
</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 | - |
defaultValue | string | "" |
onValueChange | (value: string) => void | - |
onChange | (value: string) => void | - |
onSubmit | (value: string) => void | - |
placeholder | string | "Type something..." |
borderStyle | "single" | "double" | "round" | "bold" | "single" |
borderColor | string | - |
prefix | string | ">" |
readOnly | boolean | false |
required | boolean | false |
cursorOrigin | {x: number; y: number} | - |
id | string | generated |
autoFocus | boolean | false |
isActive | boolean | true |
disabled | boolean | false |
AppShell.Content
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
autoscroll | boolean | - |
height | number | 20 |
AppShell.Hints
| Prop | Type | Default |
|---|---|---|
items | string[] | - |
children | ReactNode | - |
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:
Left/Rightmove by grapheme,Home/Endmove to the boundaries, andBackspace/Deleteremove one complete grapheme.Entersubmits or confirms (Ctrl+Enterin TextArea);Tab/Shift+Tableave through Ink focus traversal. - 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.