184 Components
Safari Browser Mockup
MockupsmacOS Safari browser chrome with traffic light controls, a central frosted unified address bar with SSL padlock, tab strip, and live viewport slot.
Analytics Dashboard — Live Demo
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/safari-browser-mockup.json"
Props
TypeScript props supported by <SafariBrowserMockup />.
| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | "https://boseui.site" | URL shown in the address bar. |
| title | string | "BoseUI — Architectural UI Components" | Active page title. |
| showTabs | boolean | true | Show Safari tab bar strip. |
| children | React.ReactNode | — | Viewport content. |
Key Features
- macOS Safari unified toolbar with SSL padlock and traffic lights.
- Interactive address bar with reload button and URL editing.
- Optional tab strip bar with page title and icon.
- Responsive container that renders any landing page or screenshot.
Keyboard & Accessibility
- Input element has accessible aria-label.
- Buttons include standard accessible labels.