Terminal

Component 13

About

A retro terminal-style panel that types out a sequence of input/output/system/error lines with a typewriter effect, useful for boot sequences, CLI-style logs, or hacker-themed UI callouts.

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

Code

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

Usage.tsx

"use client";

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

export default function TerminalDemo() {
  return (
    <div className="flex w-full min-h-[400px] items-center justify-center bg-background p-10">
      <Terminal
        className="w-full max-w-md"
        lines={[
          { type: "system", text: "SYSTEM BOOT SEQUENCE INITIATED" },
          { type: "input", text: "connect --grid=encom" },
          { type: "output", text: "Connection established. Welcome, User." },
          { type: "error", text: "Access to Sector 7 denied." },
        ]}
      />
    </div>
  );
}