Primitives

Price Display

Renders a Money value with locale-aware formatting, an optional struck-through compare-at price, and an automatic discount badge.

money

currency

discount

Preview

$129.00$179.00-28%

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add price-display

Import

import { PriceDisplay } from "@/components/lumo/price-display"

Example

<PriceDisplay
  price={{ amount: 12900, currency: "USD" }}
  compareAtPrice={{ amount: 17900, currency: "USD" }}
  size="lg"
/>

Prop	Type	Default	Required
price	Money	-	Required
compareAtPrice	Money	-
showDiscount	boolean	true
size	"sm" \| "md" \| "lg"	"md"
locale	string	-

All props accept standard HTML attributes unless otherwise specified.

Lumo blocks

npm packages

class-variance-authority

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.