Product Detail with Variants

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce34.tsx instead.

Usage

The file also exports ecommerce34Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce34, ecommerce34Demo } from "@/components/blocks/ecommerce/ecommerce34";

export default function Page() {
  return <Ecommerce34 {...ecommerce34Demo} />;
}

Props

Types

type MediaSlotImage = { src: string; alt: string };

type ColorOption = { name: string; hex: string };

Behavior notes

• Color/size selection, the quantity stepper, and the wishlist heart are all real client-side state (useState); Add to cart is decorative since there is no cart to add to in this standalone block.
• The quantity stepper clamps between 1 and 99 and disables the minus button at 1; the current count is announced to assistive tech via aria-live on the count itself.
• The wishlist button toggles a filled/unfilled heart and its aria-pressed state, but nothing is persisted or sent anywhere.
• The color swatches are native <input type="radio"> elements visually hidden with sr-only and reskinned via the wrapping <label>, using has-[:checked]/has-[:focus-visible] so keyboard focus is still visible.