Terminal

Docs

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

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be typed out in the terminal.
`className`	`string`	`-`	Custom CSS class for styling.

AnimatedSpan

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be animated.
`delay`	`number`	`0`	Delay in milliseconds before the animation starts.
`className`	`string`	`-`	Custom CSS class for styling.

TypingAnimation

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	Content to be animated.
`delay`	`number`	`0`	Delay in milliseconds before the animation starts.
`className`	`string`	`-`	Custom CSS class for styling.
`duration`	`number`	`100`	Duration in milliseconds for each character typed.
`as`	`React.ElementType`	`"span"`	The component type to render.

Marquee Hero Video Dialog

Contribute