Commerce block

Product Card Grid

Responsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.

142 lineslucide-reactAdded 8 Aug 2026Updated 11 Sept 2026

products
grid
shop
catalogue
cards

What's included

components/product-grid.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add product-grid

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Sale

Merino Crew Sweater

4.8(212)

£89.00£120.00reduced from £120.00

Selvedge Denim Jacket

4.6(88)

£145.00

Bestseller

Cotton Oxford Shirt

4.9(431)

£65.00

Waxed Canvas Holdall

4.7(56)

£199.00

Sold out

Ribbed Wool Beanie

4.5(140)

£32.00

Leather Card Holder

4.8(97)

£48.00

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/product-grid.tsx

/**
 * <ProductGrid> — a responsive grid of product cards.
 *
 * Two things worth taking rather than rewriting:
 *
 *  - Prices are integer minor units (cents), formatted with `Intl`. Storing
 *    money as a float is how `19.99 * 3` becomes `59.97000000000001` in a
 *    cart total, and it is always found in production.
 *  - The whole card is one link via an overlay pseudo-element, but the
 *    wishlist button sits above it on `z-10`. Nesting a button inside an
 *    anchor is invalid HTML and browsers resolve it by making one of them
 *    unclickable — usually the one you needed.
 *
 * Images are gradient placeholders, not remote URLs: a block that fetches
 * from a CDN is a block that breaks offline, in a sandbox, and in the
 * preview here. Swap the placeholder for `next/image` when you wire it up.
 *
 * Server component.
 */

import * as React from 'react'
import { Heart, Star } from 'lucide-react'

export interface Product {
  id: string
  name: string
  /** Price in minor units — 1999 is £19.99. Never a float. */
  price: number
  compareAt?: number
  rating?: number
  reviewCount?: number
  badge?: string
  soldOut?: boolean
  /** Tailwind gradient classes standing in for the product image. */
  swatch?: string
}

export interface ProductGridProps {
  products?: Product[]
  currency?: string
  locale?: string
  className?: string
}

const DEFAULT_PRODUCTS: Product[] = [
  { id: '1', name: 'Merino Crew Sweater', price: 8900, compareAt: 12000, rating: 4.8, reviewCount: 212, badge: 'Sale', swatch: 'from-stone-300 to-stone-500' },
  { id: '2', name: 'Selvedge Denim Jacket', price: 14500, rating: 4.6, reviewCount: 88, swatch: 'from-indigo-300 to-indigo-600' },
  { id: '3', name: 'Cotton Oxford Shirt', price: 6500, rating: 4.9, reviewCount: 431, badge: 'Bestseller', swatch: 'from-sky-200 to-sky-400' },
  { id: '4', name: 'Waxed Canvas Holdall', price: 19900, rating: 4.7, reviewCount: 56, swatch: 'from-amber-300 to-amber-600' },
  { id: '5', name: 'Ribbed Wool Beanie', price: 3200, rating: 4.5, reviewCount: 140, soldOut: true, swatch: 'from-rose-300 to-rose-500' },
  { id: '6', name: 'Leather Card Holder', price: 4800, rating: 4.8, reviewCount: 97, swatch: 'from-emerald-300 to-emerald-600' },
]

/** Minor units → a formatted price. Never divides before formatting. */
export function formatPrice(minor: number, currency = 'GBP', locale = 'en-GB'): string {
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(minor / 100)
}

export function ProductGrid({
  products = DEFAULT_PRODUCTS,
  currency = 'GBP',
  locale = 'en-GB',
  className = '',
}: ProductGridProps) {
  return (
    <div
      className={`grid grid-cols-2 gap-4 sm:gap-5 lg:grid-cols-3 xl:grid-cols-4 ${className}`}
    >
      {products.map((product) => (
        <article
          key={product.id}
          className="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg"
        >
          <div className="relative aspect-[4/5] overflow-hidden bg-muted">
            {/* Placeholder, not a remote image — see the file header. */}
            <div
              aria-hidden
              className={`h-full w-full bg-gradient-to-br ${product.swatch ?? 'from-muted to-muted-foreground/20'} transition-transform duration-500 group-hover:scale-105`}
            />

            {product.badge ? (
              <span className="absolute start-3 top-3 max-w-[calc(100%-1.5rem)] break-words rounded-full bg-foreground px-2.5 py-1 text-xs font-semibold text-background">
                {product.badge}
              </span>
            ) : null}

            {product.soldOut ? (
              <span className="absolute inset-x-0 bottom-0 break-words bg-background/90 px-2 py-2 text-center text-xs font-semibold backdrop-blur">
                Sold out
              </span>
            ) : null}

            {/* Above the card link, or the anchor swallows the click. */}
            <button
              type="button"
              aria-label={`Save ${product.name}`}
              className="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500"
            >
              <Heart aria-hidden className="h-4 w-4" />
            </button>
          </div>

          <div className="flex flex-1 flex-col p-3.5">
            <h3 className="text-sm font-medium leading-snug">
              <a
                href={`/products/${product.id}`}
                className="outline-none after:absolute after:inset-0 after:content-[''] focus-visible:underline"
              >
                {product.name}
              </a>
            </h3>

            {product.rating ? (
              <p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                <Star aria-hidden className="h-3 w-3 fill-amber-400 text-amber-400" />
                {product.rating}
                <span className="text-muted-foreground/85">({product.reviewCount})</span>
              </p>
            ) : null}

            <p className="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
              <span className="min-w-0 break-words text-sm font-semibold">
                {formatPrice(product.price, currency, locale)}
              </span>
              {product.compareAt ? (
                <>
                  <span className="min-w-0 break-words text-xs text-muted-foreground line-through">
                    {formatPrice(product.compareAt, currency, locale)}
                  </span>
                  <span className="sr-only">
                    reduced from {formatPrice(product.compareAt, currency, locale)}
                  </span>
                </>
              ) : null}
            </p>
          </div>
        </article>
      ))}
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/product-grid.tsx and import it where you need the section:

import { ProductGrid } from '@/components/product-grid'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`products`	`Product[]`	`DEFAULT_PRODUCTS`
`currency`	`string`	`'GBP'`
`locale`	`string`	`'en-GB'`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

product-grid.html

<!--
  Product Card Grid — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<div class="grid grid-cols-2 gap-4 sm:gap-5 lg:grid-cols-3 xl:grid-cols-4 ">
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-stone-300 to-stone-500 transition-transform duration-500 group-hover:scale-105"></div>
      <span class="absolute start-3 top-3 max-w-[calc(100%-1.5rem)] break-words rounded-full bg-foreground px-2.5 py-1 text-xs font-semibold text-background">Sale</span>
      <button type="button" aria-label="Save Merino Crew Sweater" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/1" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Merino Crew Sweater</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.8<span class="text-muted-foreground/85">(212)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£89.00</span>
        <span class="min-w-0 break-words text-xs text-muted-foreground line-through">£120.00</span>
        <span class="sr-only">reduced from £120.00</span>
      </p>
    </div>
  </article>
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-indigo-300 to-indigo-600 transition-transform duration-500 group-hover:scale-105"></div>
      <button type="button" aria-label="Save Selvedge Denim Jacket" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/2" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Selvedge Denim Jacket</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.6<span class="text-muted-foreground/85">(88)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£145.00</span>
      </p>
    </div>
  </article>
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-sky-200 to-sky-400 transition-transform duration-500 group-hover:scale-105"></div>
      <span class="absolute start-3 top-3 max-w-[calc(100%-1.5rem)] break-words rounded-full bg-foreground px-2.5 py-1 text-xs font-semibold text-background">Bestseller</span>
      <button type="button" aria-label="Save Cotton Oxford Shirt" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/3" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Cotton Oxford Shirt</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.9<span class="text-muted-foreground/85">(431)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£65.00</span>
      </p>
    </div>
  </article>
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-amber-300 to-amber-600 transition-transform duration-500 group-hover:scale-105"></div>
      <button type="button" aria-label="Save Waxed Canvas Holdall" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/4" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Waxed Canvas Holdall</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.7<span class="text-muted-foreground/85">(56)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£199.00</span>
      </p>
    </div>
  </article>
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-rose-300 to-rose-500 transition-transform duration-500 group-hover:scale-105"></div>
      <span class="absolute inset-x-0 bottom-0 break-words bg-background/90 px-2 py-2 text-center text-xs font-semibold backdrop-blur">Sold out</span>
      <button type="button" aria-label="Save Ribbed Wool Beanie" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/5" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Ribbed Wool Beanie</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.5<span class="text-muted-foreground/85">(140)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£32.00</span>
      </p>
    </div>
  </article>
  <article class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/60 transition-all hover:-translate-y-0.5 hover:shadow-lg">
    <div class="relative aspect-[4/5] overflow-hidden bg-muted">
      <div aria-hidden="true" class="h-full w-full bg-gradient-to-br from-emerald-300 to-emerald-600 transition-transform duration-500 group-hover:scale-105"></div>
      <button type="button" aria-label="Save Leather Card Holder" class="absolute end-3 top-3 z-10 rounded-full bg-background/80 p-2 text-muted-foreground backdrop-blur transition-colors hover:text-rose-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart h-4 w-4" aria-hidden="true">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
        </svg>
      </button>
    </div>
    <div class="flex flex-1 flex-col p-3.5">
      <h3 class="text-sm font-medium leading-snug">
        <a href="/products/6" class="outline-none after:absolute after:inset-0 after:content-[&amp;#x27;&amp;#x27;] focus-visible:underline">Leather Card Holder</a>
      </h3>
      <p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3 w-3 fill-amber-400 text-amber-400" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg>4.8<span class="text-muted-foreground/85">(97)</span></p>
      <p class="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
        <span class="min-w-0 break-words text-sm font-semibold">£48.00</span>
      </p>
    </div>
  </article>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

8 more blocks in Product Listings

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Product Listings

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Product Listings blocks

View category

Faceted Filter Sidebar

Category, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.

Product Listings220 lines1 dep2 Sept

Collection Sort Toolbar

Result count, sort and density switch — with the count in an aria-live region, since it is the only feedback a filter change gives some users.

Product Listings131 lines1 dep2 Sept

Scroll-Snap Product Rail

A "you might also like" row on native scroll-snap — touch swiping, momentum and keyboard support for free, with no carousel library.

Product Listings118 linesNo deps

Comparing 3 of 3

Only show differences

2 rows are identical across all 3 and hidden.

Specifications compared across 3 products. 2 identical rows are hidden.
Specification	Field Over-Ear£249	Field Over-Ear Lite£179	Studio Reference£329
Price	£249	£179best	£329
Battery life	38 hours	44 hoursbest	30 hours
Weight	286 g	241 gbest	324 g
Noise cancelling	Adaptive, 3 levels	Passive only	Adaptive, 5 levels
Driver	40 mm dynamic	40 mm dynamic	50 mm planar
Water resistance	IPX4	IPX4	None
Warranty	2 years	2 years	5 yearsbest

Product Comparison Table

Three products side by side with the row labels pinned through a horizontal scroll, an "only show differences" toggle that says how many rows it hid, and "best" marked only where better means something.

Product Listings341 lines1 dep13 Sept

What is actually available

"In stock" on a listing that means "one of nine variants is in stock" is the single most expensive lie in commerce UI — it is discovered at checkout, and the basket is abandoned there.

Stock Availability List

Availability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.

Product Listings149 linesNo deps10 Sept

The collection

Made to be repaired, not replaced

A grid of forty products with a one-line title is a search result. For anything considered, the reason the collection exists is what does the selling, and it belongs above the grid rather than on a linked story page nobody opens.

One factory, namedPorto, family-run, thirty years. The address is on the about page rather than implied by a photograph.
Repairs, not warrantiesSend it back at any age. Repair is charged at cost and typically beats replacing it.
Deadstock and offcutsWhich is why sizes run out and do not come back. The stock list says which.
Priced onceNo seasonal markdown, so nobody who bought in March is punished for it in July.

Collection Story Split

The editorial header above a collection grid, carrying the four facts that decide a considered purchase.

Product Listings157 linesNo deps13 Sept

Homes for sale in Bristol

142 properties · sorted by newest listed

Map and Results Split

Results on one side, a drawn map on the other, scrolling independently. The map is explicitly decorative and out of the tab order — the list is the content, not its companion.

Product Listings329 lines1 dep

Dinner

Served Wednesday to Sunday, 6pm until 10pm. One kitchen, one menu, changed when the produce changes rather than on a schedule.

To begin

Served until 3pm

Devilled eggs, brown crab, lovage(gf) (s)
9
Six halves. The crab is picked here on the morning it arrives.
Bread and cultured butter(v)
5
Sourdough from the Tuesday bake, salted butter churned in house.
Chicory, pear, hazelnut, aged ewe’s cheese(v) (gf) (n)
11
Bitter, sweet, salt. The pears are from a single orchard in Herefordshire.
Potted shrimp on toast(s)
12
Morecambe Bay brown shrimp, mace and cayenne, clarified butter.

Larger

Hogget shoulder for two, anchovy and rosemary(gf)
58
Four hours in the wood oven, carved at the table. Comes with greens and dripping potatoes.
Whole plaice, brown butter, capers, sea beet(gf)
28
On the bone. Ask and we will take it off for you.
Barley, wild mushroom, pickled walnut, curd(v) (n)
21
The mushrooms change weekly; ask what came in.
Dry-aged rib chop, bone marrow butter(gf)
market price
Thirty-five days. Priced by weight on the day.

To finish

Or a cheese plate, £4 a cut, £14 for four

Burnt honey and thyme tart(v)
10
Crème fraîche. The honey is from the roof of the building next door.
Quince, brown sugar, oat cream(ve) (df)
9
Poached slowly until it goes the colour of a penny.
Salted caramel and malt ice cream(v) (gf)
5 / 8 / 10
One scoop, two scoops, or three if the table is sharing.

(gf): Gluten free
(s): Contains shellfish
(v): Vegetarian
(n): Contains nuts
(ve): Vegan
(df): Dairy free

Please tell us about allergies before you order — we cook in one kitchen and cannot promise any dish is free of a trace. A discretionary 12.5% service charge is added to tables of six or more and goes to the people who served you.

Menu Course List

A restaurant menu typeset as a bill of fare rather than a product grid — dotted leaders to the price, dietary marks as abbreviations with a key, and prices as strings so “market price” still fits.

Product Listings282 linesNo deps