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

Command Palette

Search for a command to run...

Docs
Terminal

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

Installation

Usage

import {
  AnimatedSpan,
  Terminal,
  TypingAnimation,
} from "@/components/magicui/terminal";
<Terminal>
  <TypingAnimation>
    <AnimatedSpan>Hello, world!</AnimatedSpan>
    <TypingAnimation>MagicUI is awesome!</TypingAnimation>
  </TypingAnimation>
</Terminal>

Props

Terminal

PropTypeDefaultDescription
childrenReactNode-Content to be typed out in the terminal.
classNamestring-Custom CSS class for styling.

AnimatedSpan

PropTypeDefaultDescription
childrenReactNode-Content to be animated.
delaynumber0Delay in milliseconds before the animation starts.
classNamestring-Custom CSS class for styling.

TypingAnimation

PropTypeDefaultDescription
childrenReactNode-Content to be animated.
delaynumber0Delay in milliseconds before the animation starts.
classNamestring-Custom CSS class for styling.
durationnumber100Duration in milliseconds for each character typed.
asReact.ElementType"span"The component type to render.