$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.00
Save 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.00
Save $50.00
---
import { Price, PriceValue } from "@/components/ui/price"
---
<Price>
<PriceValue price={249} compareAt={299} discountFormat="amount" />
</Price>Notes
- Use
compareAtto show the original price and automatic savings output. - Pass
currencyandlocalewhen the defaultUSDanden-USformatting are not correct for your project. - 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.