# Product detail

> Gallery that follows the color, variants with stock, quantity and add to cart.

Block · Pro · https://lodeui.com/blocks/product-detail

## When to use

- Store product pages.

## When not to use

- Product grids: use the product card.

## Installation

```bash
npx shadcn@latest add @lode/product-detail
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductDetail } from "@/components/blocks/product-detail";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ProductDetail />
    </main>
  );
}
```

Built from: Accordion, Action button, Number field, Rating

## API reference

### ProductDetail

A product page with a gallery that follows the chosen color, sold-out sizes, quantity, validation and add to cart. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through gallery, colors, sizes and cart |
| Enter / Space | Choose an option |

## Accessibility

- Colors and sizes are labelled radio groups; sold-out sizes are disabled and say so.
- Missing size shows an error with role="alert".

## Motion

- Gallery images crossfade when the color changes.

## Responsive behavior

- Gallery stacks above details below 768px.

## Performance

- Use optimized images; only the active image is large.

## Notes for AI

- Stock per size lives in the product object; keep it in sync with your inventory.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.
- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.