Block · C-045 · storefront

ProductCard

A product tile with image, linked title, optional rating, price, points and badges. The rating is formatted through the provider.

Install

Blocks compose Koten primitives; install koten-theme first.

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

Requirements

KotenProvider for the rating: The rating value and review count are formatted with useKotenFormatters. Wrap the page in KotenProvider so separators and language match the rest of the store.

Anatomy

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

@/components/patterns/product-card.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The card is an <article> and the title is the only link, with a visible focus ring.
The rating shows the number and unit as text; stars are aria-hidden.
Badges add words, not just colour, and never cover the image's alternative text.
The image alt describes the product; if the image is decorative, the card must still make sense without it.

Read the whole page