Terminal

Open in

✔ 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

Examples

Custom Delays

Open in

Documents Downloads Pictures
/home/user/Documents

Installation

Usage

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/components/magicui/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.