Browse components
Counter
An odometer-style number where every digit column rolls on a spring, with − / + controls and soft faded edges.
Installation
npx shadcn@latest add @glint-ui/counterFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/counter.json
Usage
import { Counter } from "@/components/ui/counter";
<Counter value={128} step={1} fontSize={80} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 128 | Starting value. Changing it jumps the counter. |
| step | number | 1 | Amount per button press. |
| min | number | 0 | Lowest value. |
| max | number | 999999 | Highest value. |
| fontSize | number | 80 | Digit size in px. |
| showControls | boolean | true | Show the − / + buttons. |
| fade | boolean | true | Fade digits at the top and bottom. |
| onChange | ReactNode | — | (value: number) => void, called after a button press. |
| className | string | — | Extra classes for the root element. |