Block · C-046 · storefront

PriceBlock

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

Install

Blocks compose Koten primitives; install koten-theme first.

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

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/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

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.

Read the whole page