$99.00/ month
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={99} />
<PriceUnit>month</PriceUnit>
</Price>Installation
npx shadcn@latest add @fulldev/priceUsage
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"<Price>
<PriceValue price={99} />
<PriceUnit>month</PriceUnit>
</Price>Examples
€29.00/ month
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={29} currency="EUR" />
<PriceUnit>month</PriceUnit>
</Price>$79.00$99.00Save 20%/ month
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={79} compareAt={99} />
<PriceUnit>month</PriceUnit>
</Price>$50.00 - $100.00/ month
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={[50, 100]} />
<PriceUnit>month</PriceUnit>
</Price>$249.00$299.00Save $50.00
---
import { Price, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={249} compareAt={299} discountFormat="amount" />
</Price>€ 39,00€ 49,00Bespaar 20%/ maand
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue
price={39}
compareAt={49}
currency="EUR"
locale="nl-NL"
discountLabel="Bespaar"
/>
<PriceUnit>maand</PriceUnit>
</Price>Notes
- Use
compareAtto show the original price and automatic savings output. It only shows when it is higher thanprice, and0counts as a price. - Pass
currencyandlocalewhen the defaultUSDanden-USformatting are not correct for your project. - Pass
discountLabelto put the savings badge in the page language. It comes before the discount, as inSave 20%. - Use
showDiscount={false}when you want the strike-through price without the savings badge.
API Reference
See the GitHub source code for more information on props.