Terminal
A command line for developer docs that types its commands, prints their output line by line, and copies the commands in one press.
Examples
Install a component
Deploy log
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-terminal.jsonComponent API
Terminal
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | TerminalLine[] | The session, in order: commands are typed, output lines are printed. | |
| title | string | 'Terminal' | The label at the top left. |
| prompt | string | '$' | The prompt shown before each command, in the muted colour. |
| typingSpeed | number | 32 | Milliseconds per typed character. |
| outputDelay | number | 120 | Milliseconds before the next line when an output line has no delay of its own. |
| className | string | Optional CSS class for the card. |
TerminalLine
| Field | Type | Description |
|---|---|---|
| kind | 'command' | 'output' | A command is typed after the prompt; an output line prints at once. |
| text | string | The line. A long line scrolls sideways. |
| tone | 'default' | 'muted' | 'success' | 'warning' | 'error' | Output only: the status colour of the line. |
| delay | number | Output only: milliseconds before the next line, for a slow step. |
The session plays once when half of it is on screen, and the replay button plays it again. Every line keeps its place from the start, so the card never grows while it types. The whole session is in the page from the first render, so screen readers and text selection get every line. Under reduced motion the session shows complete, the caret stops blinking and the replay button is hidden.
The typing relies on a monospaced font, which the card sets with font-mono.
Credits
The effect is inspired by the terminal of UI Layouts, built as a working docs component.