Widgets

Clock

An analog or digital clock for any time zone, for world clocks and dashboards.

Installation

npx sinaui add clock

Copy src/lib/ui/Clock.svelte, now.svelte.ts and tokens.css; for the card around the world clocks, Widget.svelte. No dependencies.

Examples

World clocks

Each says how far ahead or behind your own time it is; faces dim after dark. All clocks on a page tick together.

<script lang="ts">
	import Clock from '#lib/ui/Clock.svelte';
	import Widget from '#lib/ui/Widget.svelte';

	const cities = [
		{ label: 'Baghdad', timeZone: 'Asia/Baghdad' },
		{ label: 'Cairo', timeZone: 'Africa/Cairo' },
		{ label: 'Córdoba', timeZone: 'Europe/Madrid' },
		{ label: 'Samarkand', timeZone: 'Asia/Samarkand' }
	];
</script>

<Widget label="World clock">
	<div class="row">
		{#each cities as c (c.label)}
			<Clock {...c} size={96} />
		{/each}
	</div>
</Widget>

<style>
	.row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.5rem;
	}
</style>

Digital

––:––

Your time

<script lang="ts">
	import Clock from '#lib/ui/Clock.svelte';
</script>

<Clock variant="digital" label="Your time" />

LED

Seven-segment digits on a dark panel. Segments fade as they change, the colon blinks each second.

Your time

<script lang="ts">
	import Clock from '#lib/ui/Clock.svelte';
</script>

<Clock variant="led" label="Your time" />

LED, your own color

Any color for the segments; here without seconds, in another time zone.

Baghdad

<script lang="ts">
	import Clock from '#lib/ui/Clock.svelte';
</script>

<Clock variant="led" timeZone="Asia/Baghdad" label="Baghdad" seconds={false} color="#ff4d3d" />

Props

Prop	Type	Default
`timeZone`	`string`: IANA, like `'Asia/Baghdad'`	the reader’s
`label`	`string`: a place name
`variant`	`'analog' \| 'digital' \| 'led'`	`'analog'`
`color`	`string`: lit color, LED only	`'#3ee6a2'`
`seconds`	`boolean`	`true`
`size`	`number`: analog diameter in px	`144`
`locale`	`string`	`'en'`

For your own live times, now() from now.svelte.ts returns the current time and updates every second wherever it's read.

Accessibility

Read as the place and the time to the minute (“Baghdad, 4:05 PM”), never ticking aloud every second.
Nothing is shown until the time is known in the browser, so it never flashes a wrong time.
With reduced motion, the second hand moves without its tick.