A timezone-aware clock with 12/24-hour modes, optional seconds, a smooth progress rail, and a live configuration editor.
24 hour12 hourSecondsReduced motionEditor
<ClockWidget timezone="Europe/Madrid" showSeconds />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ClockWidget } from '@chanrg/4ui';<ClockWidget timezone="Europe/Madrid" showSeconds />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
timezone | string | null | browser zone | Pinned IANA timezone. |
hourCycle | h12 | h23 | h23 | Hour format. |
showSeconds | boolean | true | Seconds display. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Announces time at minute granularity rather than every animation frame.