Watch
watchFrames compact content inside a smartwatch device mockup.
Usage
Basic usage
Fill the dial content with children, the default is Series 45mm model.
10:09Hulian
tsx
<Watch model="series-45">
<div className="flex h-full w-full flex-col items-center justify-center">
<span className="text-base font-semibold">10:09</span>
<span className="text-[10px] text-muted">Hulian</span>
</div>
</Watch>Default model
model determines the case size: Ultra 49mm is the largest, Series 41mm is the smallest.
10:09Hulian
10:09Hulian
10:09Hulian
tsx
<>
<Watch model="ultra-49"><Face /></Watch>
<Watch model="series-45"><Face /></Watch>
<Watch model="series-41"><Face /></Watch>
</>Custom width
width takes precedence over the model preset when passed in explicitly, allowing precise control of the case size.
10:09Hulian
tsx
<Watch width={140}>
<Face />
</Watch>Picture dial
imageSrc takes priority over children, and the entire picture is filled with cover on the dial.
Picture dial
tsx
<Watch model="series-45" imageSrc="/face.png" />When to Use
Use it to present a screenshot or rendered watch UI inside an Apple Watch-style case. Pair it with iPhone and Tablet device frames when a product story spans phone, tablet, and watch surfaces.
Import
ts
import { Watch, WATCH_MODELS } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
model | "ultra-49" | "series-45" | "se-44" | "series-41" | — | Optional model used to resolve the case width; the component itself has no model default |
width | number | Model width, or 184 without a model | Case width in pixels; an explicit value takes precedence over model |
imageSrc | string | — | The image address of the dial content, taking precedence over children |
ExtendsComponentPropsWithoutRef<"div">, forwardingclassName,style, and other native attributes.WATCH_MODELSexports widths forultra-49(210),series-45(190),se-44(184), andseries-41(172).
Slots
| Slot | Type | Description |
|---|---|---|
children | ReactNode | Dial content rendered when imageSrc is not provided |
Usage Guidelines
This is a presentational RSC with no interaction state. When both imageSrc and children are provided, imageSrc wins.
Related
Playground
10:09Hulian
<Watch model="series-45">
<img src="/face.png" />
</Watch>