Watch framePro

A smartwatch mockup with rectangular and round faces for glanceable agent status: approvals, progress and results.

On this page

ProGlanceable agent status: an approval answered in one tap, tests running on a round face between its lugs, a finished deploy.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/watch-frame

Usage

tsx

import { WatchFrame } from "@/components/ui/chatcn/pro/watch-frame"

<WatchFrame width={180} face="round">
  <RunProgress />
</WatchFrame>

The screen renders in the dark theme by default, the way watch interfaces sit on black glass. On round faces the safe area is the largest square that fits the circle. The crown is knurled and shaded as a cylinder. The band is cropped the way a product shot crops it: a little narrower than the case where it meets it, slid into a slot behind the rectangular case's corners or pinned between tapered lugs on the round one, tapering gently and fading out as it curves around the wrist. Its texture is a fine rib in two close gray steps, in a color that comes with the finish.

Examples

Finishes, no band, empty face

ProSilver, black and white cases on slim ribbed bands, and a round graphite face without its band, empty.

Props

Prop	Type	Notes
`width`	`number`	Rendered width in px. Everything scales from it. Capped at the container
`finish`	`"auto" \| "silver" \| "graphite" \| "black" \| "white"`	Hardware material. `auto` is silver in light, graphite in dark. `light` and `dark` still work as aliases for silver and graphite
`shading`	`boolean`	Metal sheen, specular edges, chamfer and glass reflection. `false` draws flat tones. Default true
`shadow`	`boolean`	Layered contact shadow, plus a floor shadow under upright devices. Default true
`glare`	`boolean`	A soft diagonal reflection on the screen glass. Default false
`viewport`	`number`	CSS width the content renders at before it scales. Smaller makes the UI larger
`screenClassName`	`string`	Class names for the screen, for example `dark`
`face`	`"rect" \| "round"`	Default rect
`band`	`boolean`	Default true
`darkScreen`	`boolean`	Content in the dark theme. Default true

Keyboard

The frame adds nothing to the tab order. Buttons inside keep 44 px targets in the demo, the size a wrist needs.

Accessibility

Case, crown and band are aria-hidden.

Motion

Frames are static. Nothing animates on hover.
Under forced-colors: active, the shell and the screen get a system color outline, so the silhouette survives without fills.