# Price Tag

Storefront price with smaller cents, a struck-through original price, sale badge and unit or monthly pricing. When the price changes, only the digits that moved roll to their new values.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/price-tag
```

## Import

```tsx
import { priceParts, formatPrice, PriceTag } from "@/components/ui/price-tag/price-tag";
```

## Variants

- `grocery` — Unit pricing: `npx @lumioui/cli add pro/price-tag-grocery`
- `product` — Product page: `npx @lumioui/cli add pro/price-tag-product`
- `subscription` — Subscription: `npx @lumioui/cli add pro/price-tag-subscription`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `amount` | `number` | Current price, in major units (e.g. 89.5 for $89.50). |
| `compareAt?` | `number` | Original price — rendered struck through when higher than `amount`. |
| `unit?` | `string` | Unit for a unit price — "lb" renders "/lb" after the amount (grocery). |
| `period?` | `string` | Subscription period — "mo" renders "/mo", "yr" renders "/yr". |
| `note?` | `string` | Short note after the price, e.g. "incl. VAT" or "per night". |
| `badge?` | `"percent" | "amount" | false | (string & {})` | Sale badge: "percent" ("−30%"), "amount" ("Save $39"), a custom string, or false. Default false. |
| `saleTone?` | `keyof typeof SALE_TONE` | Colour of the current price when on sale. Default "destructive" (sale red). |
| `freeLabel?` | `string` | Label shown instead of the figure when amount is 0, e.g. "Free". |
| `size?` | `"sm" | "md" | "lg" | "xl"` | Type scale. sm rows · md tiles · lg detail · xl hero/paywall. Default "md". |
| `layout?` | `"inline" | "stacked"` | "inline" puts compare-at beside the price; "stacked" puts it underneath. Default "inline". |
| `smallCents?` | `boolean` | Set cents a step smaller than the whole amount. Default true. |
| `format?` | `FormatPriceOptions` | Formatting options (currency symbol, decimals, separators). |
| `animate?` | `boolean` | Roll the figure and perform sale changes. Default true. |
| `delay?` | `number` | Wait before performing a change, in ms — stagger a shelf of tags  repricing together (rows 40ms apart). Default 0. |
| `saleHaptic?` | `boolean` | Light haptic as the sale badge ignites. Default false. |
| `className?` | `string` | Extra classes for the root row. |
| `amountClassName?` | `string` | Extra classes for the current amount text. |

Source: https://lumioui.com/components/price-tag