Terminal Demo

PreviousNext

Example showing a terminal with animated text and custom delays

Docs
magicuiexample

Preview

Loading preview…
registry/example/terminal-demo-2.tsx
import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/magicui/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>
  )
}

Installation

npx shadcn@latest add @magicui/terminal-demo-2

Usage

import { TerminalDemo2 } from "@/components/terminal-demo-2"
<TerminalDemo2 />