Terminal
A mac style terminal component with bash syntax highlighting and typewriter effect.
Installation
Run the following command
npx shadcn@latest add @aceternity/terminalAdd sound file
Download the sound file and place it in your public/sounds/ folder:
- sound.ogg - Audio sprite file containing all key sounds
Props
| Prop | Type | Default | Description |
|---|---|---|---|
commands | string[] | - | Array of commands to type out sequentially |
outputs | Record<number, string[]> | {} | Output lines for each command (keyed by index) |
username | string | "user" | Username shown in the prompt |
className | string | - | Additional CSS classes for the container |
typingSpeed | number | 50 | Typing speed in milliseconds per character |
delayBetweenCommands | number | 800 | Delay between commands in milliseconds |
initialDelay | number | 500 | Initial delay before typing starts |
enableSound | boolean | true | Enable keyboard sound effects on key press |
Notes
- Sound requires
/sounds/sound.oggfile in the public folder - Animation triggers when the component enters the viewport
- Includes bash syntax highlighting for commands, flags, paths, and more
- Auto-scrolls to show new content as commands execute
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
