Terminal Text for React

Terminal Text plays a short terminal session: a prompt, a command typed a character at a time, its output printed a line at a time, then the next command, ending on a prompt with a blinking caret. You write the session as you'd paste it into a README: lines that start with $ are commands, anything else is output, and lines that start with a tick, a cross, a warning sign or a tag such as [info] take the theme's colours.

Use it for an install step on a landing page, a CLI's hero, or a quick-start that shows what running a command looks like. For a single typed line inside your own mock-up, use Typing Text; for a stream of log lines that never ends, Log Stream Text. There's no timer: every character and line is in place from the start, hidden, and a CSS keyframe animation the install adds to your stylesheet shows each at its moment, so the box never changes size and nothing re-renders. With reduced motion the whole session is there at once.

Installation

Usage

import { TerminalText } from "@/components/ui/terminal-text";

<TerminalText
  text={`$ npx shadcn@latest add terminal-text
✓ Created components/ui/terminal-text.tsx`}
/>

Demos

Session

Several commands in a row, each with its output. prompt is what shows before each command, a path or a host as your shell prints it; the commands in text still start with $ . Output that starts with warning or error takes the theme's warning or destructive colour.

Timing

delay is the wait at each prompt before its command is typed, and again before its output, speed the average time per character, and stagger the time between one line of output and the next. cursor is the caret's shape: block, the default, bar, underscore or none.

Accessibility

Screen readers read the whole session once, line by line, from a visually hidden copy, never the half-typed commands; the animated session is hidden from them. The prompts can't be selected, so a command copied from the box pastes without its $. The session stays left to right on a right-to-left page, as a terminal does. The caret blinks once a second, only while it waits, and with reduced motion the session is all there, with a still caret on the last prompt.

FAQ

API Reference