✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Terminal

An implementation of the MacOS terminal. Useful for showcasing a command line interface.

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app/globals.css
✔ Installing dependencies.
ℹ Updated 1 file:- lib/utils.ts

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/magicui/terminal"

export function TerminalDemo() {
  return (
    <Terminal>
      <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>

      <AnimatedSpan className="text-green-500">
        ✔ Preflight checks.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Verifying framework. Found Next.js.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Validating Tailwind CSS.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Validating import alias.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Writing components.json.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Checking registry.
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Updating tailwind.config.ts
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Updating app/globals.css
      </AnimatedSpan>

      <AnimatedSpan className="text-green-500">
        ✔ Installing dependencies.
      </AnimatedSpan>

      <AnimatedSpan className="text-blue-500">
        <span>ℹ Updated 1 file:</span>
        <span className="pl-2">- lib/utils.ts</span>
      </AnimatedSpan>

      <TypingAnimation className="text-muted-foreground">
        Success! Project initialization completed.
      </TypingAnimation>

      <TypingAnimation className="text-muted-foreground">
        You may now add components.
      </TypingAnimation>
    </Terminal>
  )
}

Examples

Custom Delays

Documents Downloads Pictures
/home/user/Documents

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/registry/magicui/terminal"

export 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


pnpm dlx shadcn@latest add @magicui/terminal

Usage

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

<Terminal>
  <TypingAnimation>pnpm dlx shadcn@latest init</TypingAnimation>
  <AnimatedSpan>✔ Preflight checks.</AnimatedSpan>
  <AnimatedSpan>✔ Validating Tailwind CSS.</AnimatedSpan>
  <TypingAnimation>Success! Project initialization completed.</TypingAnimation>
</Terminal>

The terminal sequences its children automatically. Each TypingAnimation or AnimatedSpan starts when the previous finishes. Manual delay props are optional and typically unnecessary.

Props

Terminal

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Terminal content: a list of `TypingAnimation`/`AnimatedSpan`.
`className`	`string`	`-`	Custom CSS class for styling.
`sequence`	`boolean`	`true`	Enable auto sequencing so each line starts after the previous.
`startOnView`	`boolean`	`true`	Start sequencing when the terminal enters the viewport.

AnimatedSpan

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be faded in.
`className`	`string`	`-`	Custom CSS class for styling.
`delay`	`number`	`0`	Delay in ms before animation starts (used when `sequence` is `false`).
`startOnView`	`boolean`	`false`	If `true`, waits for viewport visibility before animating when unsequenced.

TypingAnimation

Prop	Type	Default	Description
`children`	`string`	`-`	Text to be typed.
`className`	`string`	`-`	Custom CSS class for styling.
`duration`	`number`	`60`	Milliseconds per character.
`delay`	`number`	`0`	Delay in ms before typing starts (used when `sequence` is `false`).
`as`	`React.ElementType`	`"span"`	The component type to render.
`startOnView`	`boolean`	`true`	If `true`, waits for viewport visibility before typing when unsequenced.

Striped Pattern Text Animate

On This Page

Examples Custom Delays Installation Usage Props Terminal AnimatedSpan TypingAnimation

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers