Terminal

PreviewCode

> pnpm dlx shadcn@latest init
✔ 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/u1tils.ts
Success! Project initialization completed.You may now add components.

@/demos/TerminalDemo.tsx

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

export function TerminalDemo() {
  return (
    <Terminal>
      <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>
      <AnimatedSpan class="text-green-500">✔ Preflight checks.</AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Verifying framework. Found Next.js.
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Validating Tailwind CSS.
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Validating import alias.
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Writing components.json.
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">✔ Checking registry.</AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Updating tailwind.config.ts
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Updating app/globals.css
      </AnimatedSpan>
      <AnimatedSpan class="text-green-500">
        ✔ Installing dependencies.
      </AnimatedSpan>
      <AnimatedSpan class="text-blue-500">
        <span>ℹ Updated 1 file:</span>
        <span class="pl-2">- lib/u1tils.ts</span>
      </AnimatedSpan>
      <TypingAnimation class="text-muted-foreground">
        Success! Project initialization completed.
      </TypingAnimation>
      <TypingAnimation class="text-muted-foreground">
        You may now add components.
      </TypingAnimation>
    </Terminal>
  )
}

Examples

Custom Delays

PreviewCode

$ ls
Documents Downloads Pictures
$ cd Documents$ pwd
/home/user/Documents

@/demos/TerminalDemo2.tsx

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

export function TerminalDemo2() {
  return (
    <Terminal>
      <TypingAnimation delay={0}>$ ls</TypingAnimation>
      <AnimatedSpan delay={800} class="text-blue-500">
        Documents Downloads Pictures
      </AnimatedSpan>
      <TypingAnimation delay={1600}>$ cd Documents</TypingAnimation>
      <TypingAnimation delay={2400}>$ pwd</TypingAnimation>
      <AnimatedSpan delay={3200} class="text-green-500">
        /home/user/Documents
      </AnimatedSpan>
    </Terminal>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/terminal

bun

bunx shadcn@latest add @magicui-solid/terminal

yarn

yarn dlx shadcn@latest add @magicui-solid/terminal

npm

npx shadcn@latest add @magicui-solid/terminal

Import

import { AnimatedSpan, Terminal, TypingAnimation } from '@/components/magicui/terminal'

Usage

<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	JSX.Element	-	Terminal content: a list of TypingAnimation / AnimatedSpan.
class	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	JSX.Element	-	Content to be faded in.
class	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.
class	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	ValidComponent	"span"	The element to render.
startOnView	boolean	true	If true, waits for viewport visibility before typing when unsequenced.

Original:

magicui.design/docs/components/terminal