Skip to content
fulldev/ui
X GitHub

Price

/ $ /month 
---
import { Price, PriceValue, PriceUnit } from "@/components/ui/price"
---


<Price>
  <PriceUnit>$</PriceUnit>
  <PriceValue>99</PriceValue>
  <span class="text-sm text-muted-foreground">/month</span>
</Price>

Installation

Section titled “Installation”

To install the price component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/price

Usage

Section titled “Usage”
import { Price, PriceValue, PriceUnit } from "@/components/ui/price"
<Price>
  <PriceUnit>$</PriceUnit>
  <PriceValue>99</PriceValue>
  <span>/month</span>
</Price>

Examples

Section titled “Examples”

With Currency

Section titled “With Currency”
/ $ /month 
---
import { Price, PriceValue, PriceUnit } from "@/components/ui/price"
---


<Price>
  <PriceUnit>$</PriceUnit>
  <PriceValue>29</PriceValue>
  <span class="text-sm text-muted-foreground">/month</span>
</Price>

With Different Units

Section titled “With Different Units”
/ JPY /year 
---
import { Price, PriceValue, PriceUnit } from "@/components/ui/price"
---


<Price>
  <PriceValue>9,999</PriceValue>
  <PriceUnit>JPY</PriceUnit>
  <span class="text-sm text-muted-foreground">/year</span>
</Price>