Utility
AI
Terminal
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 | - |