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


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

npx shadcn@latest add "https://magicui.design/r/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.