Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/app-shell.json
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 | undefined |
AppShell.Header
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
AppShell.Tip
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
AppShell.Input
| Prop | Type | Default |
|---|---|---|
value | string | undefined |
onChange | (value: string) => void | undefined |
onSubmit | (value: string) => void | undefined |
placeholder | string | "Type something..." |
borderStyle | "single" | "double" | "round" | "bold" | "single" |
borderColor | string | undefined |
prefix | string | ">" |
AppShell.Content
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
autoscroll | boolean | undefined |
height | number | 20 |
AppShell.Hints
| Prop | Type | Default |
|---|---|---|
items | string[] | undefined |
children | ReactNode | undefined |