Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA smartwatch drawn in CSS with an aluminum case, digital crown, curved glass and a sport, loop or leather strap. The screen is always dark and children render scaled to fit.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { WatchFrame } from "@/components/ui/watch-frame"<WatchFrame
screenWidth={208}
band="sport"
bandTone="blue"
className="max-w-[250px]"
>
<WatchFace />
</WatchFrame>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Screen content. Ignored when src or videoSrc is set. Defaults to a dark screen. |
variant | "auto" | "silver" | "black" | "gold" | "auto" | Case finish. "auto" is silver in light mode and black in dark mode. |
band | "sport" | "loop" | "leather" | "none" | "sport" | Strap style. |
bandTone | "blue" | "teal" | "orange" | "purple" | "graphite" | "red" | "graphite" | Strap color, taken from the theme's chart colors. |
src | string | - | Image shown on the screen, cropped to fill it. |
alt | string | "" | Alternative text for src. |
videoSrc | string | - | Muted, looping video shown on the screen. Paused under reduced motion. |
poster | string | - | Poster image for videoSrc. |
screenWidth | number | - | Lays children out at this width in CSS pixels, then scales them to fit. |
screenClassName | string | - | Class names for the screen. |
Also accepts all <div> props.