The MacTerminal component is a pixel-perfect recreation of the macOS Terminal.app window. It features the classic traffic light buttons, a draggable title bar, a fully interactive command line with history navigation, and a built-in neofetch-style system info display with Apple ASCII art. The terminal supports both dark and light modes automatically.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/mac-terminal.json
Basic Example
import { MacTerminal } from "@/components/klarden-ui/mac-terminal";
export default function App() {
return (
<MacTerminal
username="Kipp"
hostname="lil-boi.local"
shell="zsh"
width={680}
height={400}
draggable={true}
showNeofetch={true}
/>
);
}
Custom Command Handler
import { MacTerminal } from "@/components/klarden-ui/mac-terminal";
export default function App() {
return (
<MacTerminal
username="dev"
hostname="macbook.local"
onCommand={(cmd) => {
if (cmd === "hello") return ["Hello, World! 🚀"];
if (cmd === "status") return ["All systems operational ✅"];
return undefined; // fallback to built-in commands
}}
/>
);
}
Built-in Commands
The terminal ships with a set of built-in shell commands. You can extend or override them using the onCommand prop.
| Prop | Type | Default | Description |
|---|---|---|---|
neofetch | command | — | Displays the Apple ASCII art alongside system information. |
clear | command | — | Clears the entire terminal screen. |
whoami | command | — | Prints the currently configured username. |
hostname | command | — | Prints the currently configured hostname. |
pwd | command | — | Shows the simulated current working directory. |
date | command | — | Prints the current local date and time. |
ls | command | — | Lists mock home directory contents. |
echo <text> | command | — | Echoes the provided text back to the terminal. |
uname | command | — | Displays simulated system kernel information. |
help | command | — | Lists all available built-in commands. |
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
username | string | "Kipp" | The username displayed in the terminal prompt. |
hostname | string | "lil-boi.local" | The hostname displayed in the terminal prompt. |
shell | string | "zsh" | The shell name shown in the title bar. |
title | string | undefined | Override the title bar text. Defaults to 'username — -shell — 80x24'. |
width | number | 680 | The initial width of the terminal window in pixels. |
height | number | 420 | The initial height of the terminal body in pixels. |
draggable | boolean | true | Whether the terminal window can be dragged by its title bar. |
showNeofetch | boolean | true | Whether to display the neofetch output when the terminal mounts. |
neofetchInfo | { label: string; value: string }[] | DEFAULT_NEOFETCH_INFO | Custom system info entries for the neofetch display. |
initialLines | TerminalLine[] | undefined | Pre-fill the terminal with custom lines instead of the default neofetch output. |
onCommand | (command: string) => string[] | undefined | undefined | Custom command handler. Return string[] of output lines, or undefined to fall through to built-in commands. |
onClose | () => void | undefined | Callback when the red close button is clicked. |
onMinimize | () => void | undefined | Callback when the yellow minimize button is clicked. |
onMaximize | () => void | undefined | Callback when the green maximize button is clicked. |
className | string | — | Additional CSS classes for the outer container. |