Counter Block

Slide countdown

Days, hours, minutes and seconds to a date on soft tiles. Watch the seconds: only the figure that changed slides, the others hold still.

Settype="countdown"

with variant="slide" for the tile design. The figures read -- until the first tick, so server and client paint the same.

targetDate

is a Date, ISO string or timestamp; left out, it counts three days from mount.

doneLabel

replaces label once the date has passed, and the figures go away.

Stepper

An interactive quantity picker.

type="stepper"

renders the plus/minus quantity control.

min

and max clamp the value — the buttons disable at each end.

initialValue

is where it starts; state is internal from then on.

label

captions the control above the buttons.

Outline stepper

Usevariant="outline"

for a bordered, transparent stepper.

Soft stepper

Usevariant="soft"

for a tinted, low-contrast stepper.

Vertical stepper

Usevariant="vertical"

to stack the controls for tight sidebars.

Animated ticker

Settype="animated"

to interpolate from zero up to targetValue when it scrolls into view.

Circular progress

Settype="circular"

to draw the value as an animated SVG ring instead of a number alone.

Countdown

Settype="countdown"

to tick down to a target date rather than counting up. This is the default design — framed figures under a pill with a clock.