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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```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>
```

```astro live
---
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 `compareAt` to show the original price and automatic savings output. It
  only shows when it is higher than `price`, and `0` counts as a price.
- Pass `currency` and `locale` when the default `USD` and `en-US` formatting are
  not correct for your project.
- Pass `discountLabel` to put the savings badge in the page language. It comes
  before the discount, as in `Save 20%`.
- 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.