Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Status
Next: Video Player

Terminal

macOS-style terminal window with typing animation for CLI demos in React

Show off your CLI tool in style. This terminal component has the classic macOS look—traffic light dots and all—with two killer features: typing animation that types out commands character by character, and staggered output that reveals lines one by one. Makes your npm install instructions look like a live demo instead of static code. Perfect for landing pages, documentation, or anywhere you want to show terminal output with some visual flair. The dark theme looks especially slick.

Scroll to load preview

Installation

Code Block

Syntax highlighted code

Safari

Browser window frame

Apple Hello Effect

SVG typing animation

Code Tabs

Multi-language examples

FAQ

Was this page helpful?

Sign in to leave feedback.