Terminal

A terminal window with a prompt, commands and coloured output. It can type each command and reveal the output, with a blinking cursor and a copy button per command.

Base UI React Aria Radix UI

jacob@vwork: ~/projects/books

~/books $

✔ Checking registry.

✔ Installing dependencies.

✔ Created 1 file: - components/ui/terminal.tsx

~/books $

▲ Next.js 16.4.0 - Local: http://localhost:3000

✓ Ready in 1.2s

~/books $

error: failed to push some refs. Pull the remote changes first.

~/books $

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/terminal.json

Usage

import { Terminal } from "@/components/ui/terminal"

<Terminal
  animate
  prompt="~ $"
  lines={[
    { command: "pnpm dev" },
    { output: "Ready in 1.2s", tone: "success" },
  ]}
/>

Each line is a command or an output. A command takes a command string and an optional prompt. An output takes any content and a tone: default, muted, success, warning, error, info or accent. Line breaks in a string are kept.

Animation

With animate, the terminal waits until it scrolls into view, types each command one character at a time, then reveals the output with a short rise and blur. A replay button sits in the title bar. Every line keeps its space from the start, so the page does not jump. When the body has a max height, it scrolls to follow the typing.

With reduced motion on, every line shows at once and the cursor stops blinking.

Props

lines. The commands and output.
prompt and title. The default prompt and the window title.
variant. mac or windows chrome.
animate, typingSpeed and lineDelay. Typing on or off, milliseconds per character, and the pause after each line.
copyable. A copy button on each command. On by default.
showFinalPrompt. An empty prompt with a cursor at the end.
contentClassName. Classes for the body, like h-80.

Tag Input Textarea

On This Page

Installation Usage Lines Animation Props