Terminal React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Terminal is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Terminal from @/components/ui/terminal.

import { Terminal, type TerminalLine } from "@/components/ui/terminal"

const lines: TerminalLine[] = [
  { command: "npm install @acme/sdk", spinner: "Installing", duration: 1200, output: [{ text: "✓ Added 1 package in 1.8s", tone: "success" }] },
  { command: "npx acme login", output: ["Opening https://acme.dev/login in your browser", { text: "✓ Signed in as emma@northwind.com", tone: "success" }] },
  { command: "npx acme deploy", progress: "Uploading", duration: 1600, output: [{ text: "✓ Live at https://northwind.acme.app", tone: "success" }] },
]

export function InstallSteps() {
  return <Terminal lines={lines} title="emma@macbook: ~/northwind" mode="dark" trafficLights className="max-w-xl" />
}

Props

• lines
  TerminalLine[]

  The session, one step per entry: { command?, output?, delay?, tone?, spinner?, progress?, duration?, prompt? }. A step types its command, runs its spinner or progress bar for duration ms, then prints its output lines (strings or { text, tone }). Defaults to a short install, build and deploy session (DEFAULT_TERMINAL_LINES).

• titledefault ""
  string

  The window title, like a path or a host. Centered with the mac chrome, left-aligned with plain. Also names the transcript region for screen readers.

• promptdefault "$"
  string

  The prompt before every command, painted in the tone. A step can set its own ("#", "~/app ❯").

• copyValuedefault ""
  string

  The text the copy button copies. Defaults to every command, one per line.

• labels
  Partial<TerminalLabels>

  Every string: { region: "Terminal", copy: "Copy commands", copied: "Copied", replay: "Replay" }. region names the transcript when there is no title.

• chromedefault "mac"
  "mac" | "plain" | "none"

  mac: three window dots and a centered title. plain: a title bar with the title on the left. none: only the transcript, with the buttons floating in the corner.

• trafficLightsdefault false
  boolean

  Colors the mac dots red, yellow and green instead of a calm gray. Override them with [--terminal-dot-1:...] up to 3.

• modedefault "auto"
  "auto" | "dark"

  auto follows the page theme; dark keeps the window dark on a light page, the classic look for a hero.

• sizedefault "md"
  "sm" | "md" | "lg"

  Type 12 / 13 / 14px (one step smaller below 640px), with matching padding and title bar height (36 / 40 / 48px).

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the window: 0, 12, 16 or 24px; full falls back to 24px.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Color of the prompt, the caret and the progress bars. Output colors come from each step's tone.

• colordefault ""
  string

  Any CSS color for the prompt, caret and progress bars. Replaces the tone; leave empty to use the tone.

• showCopydefault true
  boolean

  A copy button in the title bar that copies the commands, with a check and a screen reader announcement.

• showReplaydefault true
  boolean

  A replay button that plays the session again from the start. Hidden when animate is off.

• cursordefault true
  boolean

  The block caret that types each command, and the waiting prompt with a blinking caret at the end.

• speeddefault 45
  number

  Milliseconds per typed character.

• triggerdefault "in-view"
  "mount" | "in-view"

  mount plays as soon as the page has loaded; in-view waits until a third of the window is on screen.

• loopdefault false
  boolean

  Starts over after the last line. A looping window rests while it is off screen.

• loopDelaydefault 2400
  number

  With loop, how long the finished transcript stays before it starts over, in ms.

• animatedefault true
  boolean

  Off renders the finished transcript with no typing, like a static code sample.

• defaultPlayingdefault true
  boolean

  Whether it plays on its own once triggered. Off waits on an empty prompt until playing turns true or replay is pressed.

• playing
  boolean

  Controlled playback: true plays (from the start once it has finished), false pauses where it is. Pair it with onPlayingChange, which reports false when the session ends.

• onPlayingChange
  (playing: boolean) => void

  Called when playback starts or stops, including false at the end of a session that does not loop.

• onComplete
  () => void

  Called each time the session finishes (every round with loop).

• ref
  Ref<HTMLDivElement> (a useRef object or an (el) => void callback)

  The window element.

• classNames
  Partial<Record<"header" | "dots" | "title" | "actions" | "viewport" | "body" | "line" | "prompt" | "command" | "caret" | "output" | "spinner" | "progress", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the window, merged last. Set a width or override the tone vars here.

Parts

FAQ

More React effect components