CurrentTime

Live clock with animated digits, a location label, and an optional weather line.

Usage

svelte

<script lang="ts">
  import { CurrentTime } from "@milandekruijf/ui/svelte";
</script>

<CurrentTime
  locale="en-US"
  timeZone="Europe/Amsterdam"
  locationLabel="Amsterdam, NH"
/>

Examples

Live clock

  PM Amsterdam, NH

<script lang="ts">
  import { CurrentTime } from "@milandekruijf/ui/svelte";
  import { routeLocale } from "#lib/i18n/sveltekit.js";

  const locale = $derived(routeLocale() === "nl" ? "nl-NL" : "en-US");
</script>

<CurrentTime {locale} locationLabel="Amsterdam, NH" />

Props

Prop	Type	Default	Description
locale?	`string`	"en-US"	BCP-47 locale; also picks the 12h/24h convention.
timeZone?	`string`	"Europe/Amsterdam"	IANA time zone id.
locationLabel?	`string`	""	Secondary line under the clock.
weather?	`CurrentTimeWeather \| null`	null	Optional weather line as `{ temp, label, alt? }`.
class?	`string`	—	Extra classes merged on the root.