Chrome
chromeFrames content in a Chrome-style browser window with tabs and address bar.
Usage
Basic usage
Chrome shell with tab strip + toolbar, wrapping any content.
<Chrome url="hulian.design" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Chrome>Custom label title
title Sets the tab title. By default, it falls back to url.
<Chrome url="hulian.design" title="Hulian" style={{ width: 375 }}>
<img src="/screenshot.png" alt="" />
</Chrome>Picture screenshot
Pass imageSrc to directly render web page screenshots (priority to children).
<Chrome url="hulian.design" imageSrc="/screenshot.png" style={{ width: 375 }} />When to Use
Use it to frame a web screenshot or live view in a Chrome-style window with a tab title and navigation toolbar. It conveys more browser context than Safari and works well when a product image should clearly look browser-based. Use Safari for a minimal traffic-light frame, Terminal for a command-line window, or iPhone, Android, and Tablet for device frames.
Import
import { Chrome } from "@hulianui/ui"Props
Extends ComponentPropsWithoutRef<"div">, forwarding className, style, and other native attributes. Width is commonly set with style={{ width }}.
| Name | Type | Default | Description |
|---|---|---|---|
| url | string | "hulian.design" | Address bar text. |
| title | string | Get the url | tab title. |
| imageSrc | string | — | The image address of the content area, taking precedence over children. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom node in the content area (rendered when imageSrc is not passed). |
Usage Guidelines
- This presentational shell has no default width. Set one with
style={{ width }}orclassName, or it shrinks to its content width. - When both
imageSrcandchildrenare provided,imageSrcwins andchildrenis ignored.
Related
Playground
<Chrome url="hulian.design" title="Hulian">
<img src="/screenshot.png" />
</Chrome>