Price Roller
A pricing display that animates numbers rolling into place.
$012345678901234567890123456789/mo
Installation
1
Run the following Command
>_npx shadcn@latest add https://minimal-ui-eta.vercel.app/r/priceroller.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Optional custom CSS classes for the root container. |
| plans | PricePlan[] | Monthly / Yearly defaults | Billing plans with id, label, and price. Each plan drives the animated ticker value. |
| defaultPlanId | string | "monthly" | Initial selected plan when used in uncontrolled mode. |
| value | string | undefined | Selected plan id for controlled usage. |
| onChange | (planId: string) => void | undefined | Called when the user switches billing plans. |
| currencySymbol | string | "$" | Symbol shown before the animated price. |
| suffix | string | "/mo" | Text shown after the animated price. |
| layoutId | string | "active-pill" | Framer Motion layoutId for the active pill. Use unique values when rendering multiple rollers. |
| priceClassName | string | undefined | Optional classes for the price display wrapper. |
| currencyClassName | string | undefined | Optional classes for the currency symbol. |
| suffixClassName | string | undefined | Optional classes for the suffix text. |
| switchClassName | string | undefined | Optional classes for the segmented switch container. |