Terminal Typewriter

Component 7

About

An animated terminal window that types out CLI commands and their output character-by-character, useful for showcasing install steps or quick-start guides.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Terminal Typewriter to your project and fits it to your theme.

Code

How Terminal Typewriter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Terminal1 } from "@/components/ui/terminal1";

export default function Terminal1Demo() {
  return (
    <Terminal1
      badge={{ label: "Quick Start", variant: "secondary" }}
      heading="Get started in seconds"
      description="Install our CLI and start building. Just a few commands to get up and running."
      terminal={{
        title: "Terminal",
        commands: [
          {
            id: "cmd-1",
            prompt: "$ ",
            command: "npm install -g @acme/cli",
            output: "Installing @acme/cli...\n\u2713 Installed successfully",
            outputDelay: 800,
          },
          {
            id: "cmd-2",
            prompt: "$ ",
            command: "acme init my-project",
            output: "Creating project structure...\n\u2713 Project initialized",
            outputDelay: 600,
          },
          {
            id: "cmd-3",
            prompt: "$ ",
            command: "cd my-project && acme dev",
            output:
              "Starting development server...\n\u2713 Ready at http://localhost:3000",
            outputDelay: 500,
          },
        ],
        typeSpeed: 50,
        delayBetweenCommands: 1000,
        showLineNumbers: false,
      }}
      showCopyButton
      glowEffect
    />
  );
}