---
title: "PriceBlock"
description: "Price hierarchy: current amount, tax, previous price, points, stock and a note. Two sizes for product pages and listings."
kind: block
id: C-046
category: storefront
registry: "price-block"
docs: "https://koten.codehive.com.co/blocks/storefront/price-block"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/price-block.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/price-block.json"
language: en
---

# PriceBlock · 価格

> Block C-046 in the Koten UI catalog.

Price hierarchy: current amount, tax, previous price, points, stock and a note. Two sizes for product pages and listings.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/price-block.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/price-block.json
```

## Files

- `@/components/patterns/price-block.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Campaign price

The previous price stays visible with a strike-through; stock and note add context without competing with the amount.

```tsx
<PriceBlock
  price="¥52,470"
  taxLabel="Tax included"
  listPrice="¥58,300"
  listPriceLabel="List price"
  saleLabel="Autumn fair"
  points="524 points"
  stock={{ label: "In stock", tone: "success" }}
  note="Prices include tax. While stock lasts."
/>
```

### Compact size

size="md" shrinks the amount for cards and listings; the rest of the hierarchy stays the same.

```tsx
<PriceBlock
  price="¥9,800"
  size="md"
  taxLabel="Tax included"
  points="98 points"
  stock={{ label: "Low stock", tone: "warning" }}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `price` | `ReactNode` | `—` | Current amount; pass it already formatted (formatCurrency) so currency and locale stay in sync. |
| `taxLabel` | `ReactNode` | `—` | Tax clarification next to the amount; it is never left to context. |
| `listPrice` | `ReactNode` | `—` | Previous price with a strike-through; pair it with listPriceLabel to give it meaning. |
| `saleLabel` | `ReactNode` | `—` | Campaign badge above the price, in the sale tone. |
| `points` | `ReactNode` | `—` | Earned points, with the unit included in the text. |
| `stock` | `{ label: ReactNode; tone: "success" \| "warning" \| "danger" }` | `—` | The tone colours the badge; the label word carries the information. |
| `size` | `md \| lg` | `lg` | lg for product pages, md for cards and tables. |
| `note` | `ReactNode` | `—` | Legal or shipping note under the block, in small but readable text. |

## Accessibility

- Every amount is text with tabular figures, never an image.
- The previous price is marked with line-through and a list-price label, not by styling alone.
- Stock communicates through a word and a coloured dot; colour is never the only carrier.
- The note keeps the 12 px minimum and enough contrast against the background.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/price-block
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/price-block.md
- Repository: https://github.com/codehive-colombia/koten