Safari
safariFrames screenshots in a Safari-style browser window with an address bar.
Usage
Basic usage
Use Safari shell to wrap any content (webpage screenshots, component previews, etc.).
<Safari url="hulian.design" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>Customize the address bar
Set address bar text via url.
<Safari url="app.hulian.design/dashboard" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Safari>Picture screenshot
Pass imageSrc to directly render web page screenshots (priority to children).
<Safari url="hulian.design" imageSrc="/screenshot.png" style={{ width: 375 }} />When to Use
Wrap webpage screenshots/live content into a macOS Safari-style window frame for landing page display and document illustration. It only has a minimalist top bar with traffic lights + address bar; if you want tabs + forward/back/refresh toolbar, use Chrome, if you want command line style, use Terminal, and if you want mobile phone/tablet body, use iPhone/Tablet.
Import
import { Safari } from "@hulianui/ui"Props
Inherits ComponentPropsWithoutRef<"div">; className, style, and other div props are forwarded. Use style={{ width }} or a width utility to size the frame.
| Name | Type | Default | Description |
|---|---|---|---|
| url | string | "hulian.design" | Address bar text. |
| imageSrc | string | — | The image address of the content area, taking precedence over children. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom node in content area (rendered when imageSrc is not passed). |
Usage Guidelines
- The shell has no default width. Set one through
styleorclassName; otherwise it shrinks to its content. - When both
imageSrcandchildrenare provided,imageSrctakes precedence and children are ignored.
Related
Playground
<Safari url="hulian.design">
<img src="/screenshot.png" />
</Safari>