$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>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.