Interactive Terminal renders a convincing shell window in the browser with a title bar, prompt, and lines that type out on schedule. It can accept commands from the user and run callbacks against them, so it works as a real, if simple, command interface. Built with React and Tailwind CSS. Great for developer tool landing pages, CLI product demos, and playful contact forms that ditch the usual inputs.
Installation
Examples
Default theme
Synthwave theme
Retro theme — manually type command
Usage
import { InteractiveTerminal } from "@/components/ui/terminal";
import { Terminal } from "lucide-react";// Basic usage with default theme
<InteractiveTerminal
command="npm install"
steps={["Installing packages...", "Resolving dependencies..."]}
finalMessage="Installation complete!"
/>
// Custom styling with different variant
<InteractiveTerminal
command="deploy --production"
icon={<Terminal className="mr-2" />}
steps={[
"Building project...",
"Running tests...",
"Optimizing assets...",
"Deploying to production..."
]}
finalMessage="Deployment successful!"
variant="sky"
stepDelay={800}
/>
// Auto-executing command with repeat functionality
<InteractiveTerminal
command="ping server.example.com"
steps={["Sending packet...", "Waiting for response..."]}
finalMessage="Response received: 42ms"
autoExecute
repeat
repeatDelay={2000}
/>
// Custom theme and styling
<InteractiveTerminal
command="hack --mainframe"
steps={[
"Bypassing firewall...",
"Cracking encryption...",
"Accessing mainframe..."
]}
finalMessage="Access granted!"
variant="synthwave"
promptSymbol=">"
className="border border-fuchsia-500"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | "help" | Command that users need to enter to trigger the terminal sequence |
steps | string[] | ["Processing command"] | Array of processing steps to display sequentially |
finalMessage | string | "Command executed successfully!" | Final message to display after all processing steps |
stepDelay | number | 1000 | Delay between processing steps in milliseconds |
typingDelay | number | 100 | Delay between individual keystrokes when animating typing |
icon | React.ReactNode | <TerminalIcon /> | Icon to display in the title bar |
promptSymbol | string | "$" | Terminal prompt symbol displayed before user input |
inputPlaceholder | string | "Type a command…" | Placeholder text for the input field |
autoExecute | boolean | false | Enables automatic command execution without waiting for user input |
repeat | boolean | false | Whether to repeat the entire command sequence automatically |
repeatDelay | number | 3000 | Delay between repetitions when repeat is enabled |
className | string | undefined | Additional CSS class names to apply to the terminal container |
title | string | "zsh — 80×24" | Window title shown in the title bar |
variant | string | "default" | Visual style variant (default, sky, synthwave, retro) |