Hero

Terminal Hero

A 'code-builds-the-page' hero: a headline above a macOS-style terminal that types your install commands and prints their output. Ships the reusable Terminal window too, with reduced-motion, in-view triggering, replay, copy, and keystroke sound.

UniqueUI CLI

npx uniqueui add hero-terminal

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-terminal.json -y

Preview

One command to ship

Watch your stack build itself.

Copy-paste components, zero config. Run the commands below and your project is production-ready before the cursor stops blinking.

zsh — your-project

Usage

import { TerminalHero } from "@/components/ui/hero-terminal";

export default function Hero() {
  return (
    <TerminalHero
      username="you"
      title="zsh — your-project"
      commands={[
        "npx shadcn@latest init",
        "npm install motion",
        "npx shadcn@latest add button card",
      ]}
      outputs={{
        0: [
          "✔ Preflight checks passed.",
          "✔ Created components.json",
          "✔ Initialized project.",
        ],
        1: ["added 1 package in 2s"],
        2: ["✔ Done. Installed button, card."],
      }}
    >
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur">
        One command to ship
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        Watch your stack build itself.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        Copy-paste components, zero config — production-ready before the cursor
        stops blinking.
      </p>
    </TerminalHero>
  );
}

Props

Prop	Type	Description
`children`	`ReactNode`	Slotted hero content above the terminal (headline / subhead / CTAs). When omitted, a default composition renders.
`commands`	`string[]`	Commands typed out sequentially in the terminal. Defaults to a shadcn init/install sequence.
`outputs`	`Record<number, string[]>`	Output lines printed after a command finishes typing, keyed by the command's index.
`username`	`string`	Name shown highlighted in the shell prompt (renders as `username:~$`).
`title`	`string`	Text shown centered in the window title bar.
`typingSpeed`	`number`	Typing speed in milliseconds per character.
`delayBetweenCommands`	`number`	Pause in milliseconds after a command's output before the next command starts.
`initialDelay`	`number`	Delay in milliseconds before the first command begins typing.
`enableSound`	`boolean`	Play a subtle keystroke click on each character via the Web Audio API. Defaults off in the hero to avoid autoplay audio.
`loop`	`boolean`	Restart the typing sequence from the top once it finishes.
`className`	`string`	Extra classes on the outer `<section>`.