ComponentsNumbers
Price ticker
Prices tick with a flash of up or down.
Installation
$ npx shadcn@latest add @textlab/price-tickerNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { PriceTicker } from "@/components/textlab/price-ticker/price-ticker";
<PriceTicker value={price} currency="EUR" />Variants
currencypercentcompactProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | – | The price, or a ratio of 1 for percent. |
| variant | "currency" | "percent" | "compact" | "currency" | Money with cents, a percentage, or compact money like $1.2K. |
| currency | string | "USD" | ISO currency code. |
| locale | string | "en-US" | Formatting locale. |
| showDelta | boolean | true | Show the change next to the price. |
| upColor | string | green | Flash and delta color for rises. |
| downColor | string | red | Flash and delta color for falls. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Live prices, portfolio values and conversion rates.
- Any number where the direction of change matters as much as the value.
Skip it
- Static prices on a pricing page.
- Values that change more than a few times a second.
Accessibility and motion
Accessibility
- The delta is announced politely, so screen readers hear the direction.
- Direction is shown by an arrow and a sign, not color alone.
Motion
- Digits roll up on a rise and down on a fall.
- The flash holds briefly, then fades to the text color over 1.2 s.
Reduced motion. The price and delta update in place with no roll or flash.
Performance
- Built on rolling-number; one spring per digit.