Browse components
Number Ticker
An odometer-style number in a squircle window: every digit is a 0-9 strip that rolls to its new value.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/number-tickerFirst 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/number-ticker.json
Usage
import { NumberTicker } from "@/components/ui/number-ticker";
<NumberTicker value={12847} variant="calamansi" className="text-5xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The number to show. Changing it rolls the digits. |
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Surface palette. |
| duration | number | 0.7 | Seconds for each digit to settle. |
| stagger | number | 0.05 | Delay between digits, in seconds (right to left). |
| direction | "up" | "down" | "up" | Roll the digit strips upward or downward. |
| prefix | string | "" | Static text before the digits. |
| suffix | string | "" | Static text after the digits. |
| format | ReactNode | — | `(value) => string`. Defaults to a grouped en-US number. |
| className | string | — | Extra classes for the root element. |