Playground

Every prop and theme variable, live. Toggle what you want and copy the snippet at the bottom — it stays in sync with the clock above it.

Props

smoothSweepuseRomancardinalOnlyhideSecondshideNumbershideTickshideMajorTickshideMinorTickshideDatenoBorderdualTone

Timezone

Local timeNew YorkLondonTokyoSydney

Tick duration

600ms

Sweep mode moves continuously — turn it off to feel this.

Colors

--cui-bg-color--cui-primary-color--cui-secondary-color--cui-accent-color

<LiveClock
  smooth-sweep
/>

The colors map to CSS custom properties, so you can set them on any ancestor element rather than passing them as props. See CSS Customization for the full list of variables, including the per-element overrides that are not surfaced here.