Terminal
A command line that types itself. It waits until it scrolls into view, so the demo is never already over by the time it is seen.
SurfacesClient component
Preview
~/projects/pond
$
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/terminalPulls in @duck/theme. Already installed items are skipped.
Usage
import { Terminal } from "@/components/ui/terminal"The file lands in components/ui/terminal.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | { prompt?: string; text: string; output?: string }[] | - | Commands to type, each with optional output printed underneath. |
| title | string | "bash" | Window bar label. |
| prompt | string | "$" | Default prompt character. |
| speed | number | 34 | Milliseconds per character. |
| loop | boolean | false | Replay from the top after a pause. |
| holo | boolean | false | Iridescent frame. |
Rules
What keeps this component from turning into noise.
- Under prefers-reduced-motion the whole transcript renders at once.
- Keep transcripts under six lines. A terminal that types for a minute is a video, not a component.