Price
Flexible price component with customizable features and options and currency support.
Loading...
Installation
Usage
<Price
className="tabular-nums tracking-tighter space-x-2"
amount={1999}
compareAt={2499}
currency="USD"
>
<PriceCurrent className="font-semibold" />
<PriceCompareAt className="text-sm line-through text-muted-foreground" />
<PriceSavings
className={`${badgeVariants({ variant: 'outline' })} text-emerald-500 bg-emerald-100 border-none`}
>
Save
</PriceSavings>
</Price>Props
Price
| Prop | Type | Default |
|---|---|---|
currency? | USD | EUR | GBP | JPY | USD |
compareAt | number | - |
amount | number | - |