KQ-1220 · PARKING/METER

Parking Meter

A parking meter widget: in the classic style a needle sweeps down a cream dial through the time left, in the digital style seven-segment digits and a ten-bar graph show it, and both read one motion value. Tapping the meter or its button drops a coin into the slot on an accelerating tween as it turns edge-on, it clacks as it lands, and the needle kicks up to the new time on the recoil spring, overshooting against its stop pin and ticking past each mark; a full meter bounces the coin back out. In the last minutes the window's rim pulses and the red flag peeks over the sill, popping up on recoil at expiry; the add button is the keyboard's way in, and the time left is announced at the thresholds and after every coin.

KQ-1220 · PARKING/METER

Bay 14

0:12

left · until 14:32

14:20 · 0:12 left · until 14:32

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/parking-meter

Props

now: Date | number; default —; The moment it is. Pass it, with timeZone, to render on the server; without it the meter keeps its own clock after hydration.
timeZone: string; default —; The IANA time zone times are shown in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue: number | null; default null; The moment the meter is paid until, in ms. Null or past is expired.
onValueChange: (paidUntil: number) => void; default —; Fires as each coin lands, with the new paid-until moment.
max: number; default 120; The longest stay, in minutes: the dial's scale and marks, and the cap a coin cannot pass.
coin: number; default 20; Minutes one coin buys: the slot plate, the button and how far the needle kicks.
style: "classic" | "digital"; default "classic"; An enamel dome with a needle dial, or a charcoal digital head with an LCD of segment digits and bars.
warnAt: number; default 10; Minutes left at which the window starts to pulse, the flag to peek and the reading turns the warning colour.
label: string; default "Parking"; What is parked, shown over the reading and used in its announcements.
onRefuse: () => void; default —; A coin refused because the meter is already at max.
sound: boolean; default false; The coin's clack (a low one when refused) and a tick for each mark the needle passes on its kick, only after a visitor's tap or press. Time passing is silent.
disabled: boolean; default false; Keeps counting down, but takes no coins.
className: string; default —; Classes for the tile.

Prop	Type	Default	Description
now	Date \| number	—	The moment it is. Pass it, with timeZone, to render on the server; without it the meter keeps its own clock after hydration.
timeZone	string	—	The IANA time zone times are shown in, e.g. "UTC". Defaults to the runtime's own.
value / defaultValue	number \| null	null	The moment the meter is paid until, in ms. Null or past is expired.
onValueChange	(paidUntil: number) => void	—	Fires as each coin lands, with the new paid-until moment.
max	number	120	The longest stay, in minutes: the dial's scale and marks, and the cap a coin cannot pass.
coin	number	20	Minutes one coin buys: the slot plate, the button and how far the needle kicks.
style	"classic" \| "digital"	"classic"	An enamel dome with a needle dial, or a charcoal digital head with an LCD of segment digits and bars.
warnAt	number	10	Minutes left at which the window starts to pulse, the flag to peek and the reading turns the warning colour.
label	string	"Parking"	What is parked, shown over the reading and used in its announcements.
onRefuse	() => void	—	A coin refused because the meter is already at max.
sound	boolean	false	The coin's clack (a low one when refused) and a tick for each mark the needle passes on its kick, only after a visitor's tap or press. Time passing is silent.
disabled	boolean	false	Keeps counting down, but takes no coins.
className	string	—	Classes for the tile.