Components
Terminal
Minimal workflow terminal with line-numbered code reveal and optional auto-cycling steps.
Preview
Component
Workflow Terminal
Minimal code-window terminal with line numbers, staggered character reveal, and optional automatic step cycling.
Cycles through workflow steps and replays the line-by-line reveal animation
workflow.ts
1pnpm install2pnpm lint3pnpm types:check
Usage
import { Terminal, type TerminalStep } from "@/components/ui/terminal";
const steps = [
{
code: `pnpm install
pnpm lint
pnpm types:check`,
},
{
code: `export function buildWorkflow() {
replaceTerminal();
return "ready";
}`,
},
] satisfies ReadonlyArray<TerminalStep>;
<Terminal steps={steps} />Props
Terminal
| Prop | Type | Default | Description |
|---|---|---|---|
steps | ReadonlyArray<{ code: string }> | Required | Step list that drives the displayed code block. |
activeStep | number | — | Controlled step index. When omitted, the component manages the current step itself. |
autoPlay | boolean | true | Automatically cycles through the provided steps when activeStep is not controlled. |
interval | number | 2200 | Milliseconds between step changes in auto-play mode. |
className | string | — | CSS classes on the outer container |