Product Card 6 - Color swatches and size pickerPro
Three bordered product cards each with a named color swatch row and a size grid with sold-out states, enabling Add to bag only once a size is chosen. Use it for fashion and footwear catalogs where shoppers pick variants straight from the listing.
About Product Card 6
Three bordered product cards each with a named color swatch row and a size grid with sold-out states, enabling Add to bag only once a size is chosen. Use it for fashion and footwear catalogs where shoppers pick variants straight from the listing.
Product Card 6 is a pro product card block for React, built on shadcn/ui and Tailwind CSS. It ships as 117 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- ecommerce
- card
- swatches
- sizes
- variants
- add-to-bag
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-card-06Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import ProductCard06 from "@/components/blocks/product-card-06"
export default function Page() {
return <ProductCard06 />
}