Terminal

Component 7

About

An animated fake terminal window that types out commands and shows sequenced output lines, used to showcase CLI usage or installation steps.

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

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

export default function TerminalDemo2() {
  return (
    <Terminal>
      <TypingAnimation delay={0}>$ ls</TypingAnimation>

      <AnimatedSpan delay={800} className="text-blue-500">
        Documents Downloads Pictures
      </AnimatedSpan>

      <TypingAnimation delay={1600}>$ cd Documents</TypingAnimation>

      <TypingAnimation delay={2400}>$ pwd</TypingAnimation>

      <AnimatedSpan delay={3200} className="text-green-500">
        /home/user/Documents
      </AnimatedSpan>
    </Terminal>
  );
}