184 Components
Terminal Window Mockup
MockupsmacOS dark terminal window frame featuring traffic light buttons, prompt symbols (❯), a blinking cursor, command output lines, and a one-click copy command button.
zsh — boseui cli
❯npx boseui add iphone-16-pro-mockup
✔ Fetching component manifest...
✔ Installing Framer Motion spring physics...
✔ Component ready at src/components/ui/IPhone16ProMockup.tsx
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactframer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/terminal-window-mockup.json"
Props
TypeScript props supported by <TerminalWindowMockup />.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "zsh — 80×24" | Terminal title in header. |
| command | string | "npx boseui add magnetic-button" | Terminal input command. |
| output | string | string[] | — | Console output lines. |
| copyable | boolean | true | Enable copy command button. |
| children | React.ReactNode | — | Custom inner content. |
Key Features
- macOS titlebar with traffic light buttons and terminal title.
- Blinking cursor indicator on the active command line.
- Integrated one-click copy button for commands.
- Configurable multi-line command output.
- Support for custom child elements or interactive terminal shells.
Keyboard & Accessibility
- Accessible copy button with aria-label and confirmation state.
- Pre-formatted monospace text retains natural screen-reader output.