Price Tag

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/price-tag

Usage

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

Also exported: priceParts, formatPrice.

Examples

Unit pricing

Unit pricing in a produce aisle, green.

Product page

The price block on an apparel product page, in ink.

Subscription

A podcast app's upgrade screen, pink.

API reference

Prop Type Default
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.

 false
saleTone keyof typeof SALE_TONE

Colour of the current price when on sale. Default "destructive" (sale red).

 "destructive"
freeLabel string

Label shown instead of the figure when amount is 0, e.g. "Free".

 —
size
"sm" | "md" +2 "sm" | "md" | "lg" | "xl"

Type scale. sm rows · md tiles · lg detail · xl hero/paywall. Default "md".

 "md"
layout "inline" | "stacked"

"inline" puts compare-at beside the price; "stacked" puts it underneath. Default "inline".

 "inline"
smallCents boolean

Set cents a step smaller than the whole amount. Default true.

 true
format FormatPriceOptions

Formatting options (currency symbol, decimals, separators).

 —
animate boolean

Roll the figure and perform sale changes. Default true.

 true
delay number

Wait before performing a change, in ms — stagger a shelf of tags repricing together (rows 40ms apart). Default 0.

 0
saleHaptic boolean

Light haptic as the sale badge ignites. Default false.

 false
className string

Extra classes for the root row.

 —
amountClassName string

Extra classes for the current amount text.

 —