Safari
Safari is a chrome-only frame: three window controls, an address bar and a content area, with the page inside left entirely to the default slot.
It is the counterpart to the phone mocks — use it when the thing you are showing is a desktop layout and the point is that it lives in a browser.
Usage
nuxt.com
The address bar and window controls are chrome; the page inside is your slot.
<template>
<div class="flex w-full items-center justify-center py-6">
<MSafari class="w-full max-w-xl">
<div class="flex h-56 flex-col items-center justify-center gap-2 bg-gradient-to-b from-default to-elevated p-6 text-center">
<p class="text-lg font-semibold text-highlighted">
nuxt.com
</p>
</div>
</MSafari>
</div>
</template>
Customize
nuxt.com
The page inside is your slot
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | 'nuxt.com' | Text shown in the address bar. It is truncated with an ellipsis when it does not fit. |
class | string | '' | CSS classes for the frame. The frame has no width of its own, so set one here or from a parent. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | Page content. It sits under the chrome with no padding of its own. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.safari in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | mx-auto overflow-hidden rounded-xl border border-default bg-elevated shadow-xl |
bar | - | flex items-center gap-1.5 border-b border-default px-4 py-3 |
light | - | size-3 rounded-full |
address | - | ml-3 flex-1 truncate rounded-md bg-default px-3 py-1 text-xs text-muted |
content | - | bg-background |
Accessibility
The traffic lights are empty, unlabelled spans, so they are invisible to assistive technology. The address bar is a plain span rather than an input: it reads as text and cannot be focused or edited, which is the honest model for a picture of a browser.