Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Price
description: A flexible price display component for showing pricing information.
---

```astro live props={{ name: 'price' }}
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---

<Price>
  <PriceValue price={99} />
  <PriceUnit>month</PriceUnit>
</Price>
```

## Installation

```bash
npx shadcn@latest add @fulldev/price
```

## Usage

```ts
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
```

```astro
<Price>
  <PriceValue price={99} />
  <PriceUnit>month</PriceUnit>
</Price>
```

## Examples

```astro live
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---

<Price>
  <PriceValue price={29} currency="EUR" />
  <PriceUnit>month</PriceUnit>
</Price>
```

```astro live
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---

<Price>
  <PriceValue price={79} compareAt={99} />
  <PriceUnit>month</PriceUnit>
</Price>
```

```astro live
---
import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
---

<Price>
  <PriceValue price={[50, 100]} />
  <PriceUnit>month</PriceUnit>
</Price>
```

```astro live
---
import { Price, PriceValue } from "@/components/ui/price"
---

<Price>
  <PriceValue price={249} compareAt={299} discountFormat="amount" />
</Price>
```

## Notes

- Use `compareAt` to show the original price and automatic savings output.
- Pass `currency` and `locale` when the default `USD` and `en-US` formatting 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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/price) for more information on props.