Terminal
An animated terminal that types out a script of commands and output — for demos, onboarding and agent transcripts
Category: display · WCAG 2.2-AA · ai, terminal, cli, demo, typewriter, agent, transcript
Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | TerminalLine[] | — | The script. Each line has `text`, an optional `prefix` (e.g. `
|
speed | number | 3 | Characters typed per animation frame. |
loop | boolean | false | Restart from the first line after the last one. |
onComplete | () => void | — | Called each time the last line finishes typing. |
labels | { label?: string } | — | Overrides for the component’s user-visible strings (i18n) — `label` names the terminal for screen readers. |
Design tokens
--cascivo-terminal-bg--cascivo-terminal-fg--cascivo-editor-bg--cascivo-editor-fg--cascivo-editor-border--cascivo-editor-syntax-keyword--cascivo-editor-syntax-string--cascivo-editor-syntax-comment--cascivo-color-destructive--cascivo-font-mono
When to use
- Demonstrating a CLI or agent run on a marketing or onboarding page
- Replaying a short agent transcript as it happened
When not to use
- Real, long-running logs — use LogViewer
- Copyable code — use CodeSnippet
How to build an accessible Terminal in React →
Examples
Install transcript
<Terminal
lines={[
{ text: 'npx cascivo add button', prefix: '#39;, type: 'command' },
{ text: 'Added button to src/components.', type: 'output' },
{ text: '# done in 1.2s', type: 'comment' },
]}
/>Related components
- LogViewer — LogViewer is for real, streaming logs with search and follow
- CodeSnippet — CodeSnippet is for static, copyable commands