MiniDev UI

Terminal

Motion

Terminal is a React animated terminal window that types commands and prints output lines in sequence, with colored line kinds, a blinking cursor and a replay button.

src/registry/premium/terminal.tsx/r/terminal.json

Installation#

bash
npx shadcn@latest add @minidev/terminal

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/terminal.json

Usage#

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

export function Example() {
  return <Terminal />
}

API reference#

Terminal props
PropTypeDefault
linesTerminalLine[]SAMPLE_LINES
titlestring"Terminal"
promptstring"❯"
typingSpeednumber26
lineDelaynumber160
commandDelaynumber600
loopbooleanfalse
replaybooleantrue
appearance"dark" | "auto""dark"
onComplete() => void-
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

No other MiniDev files

Related dev tools components#

Docs MarketingA React docs landing page with an animated headline, docs search, get started and API buttons, a table of contents and scroll revealed code and callouts.Api Key ListReact settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.Build PipelineCI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.Check Run ListList of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.Code BlockReact code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.Code Editor FrameEditor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.
All Developer tool UI components for React