Product Card

block

Catalogue tile with badges, compare-at pricing, colour swatches that swap the image, rating and a keyboard-reachable quick-add. Compound: use it as one tag, or recompose it from ProductCardMedia, ProductCardBody and their parts via useProductCard().

pnpm dlx shadcn@latest add "https://ecomcn.vercel.app/r/product-card.json"

Sign In

Product Card

block

Catalogue tile with badges, compare-at pricing, colour swatches that swap the image, rating and a keyboard-reachable quick-add. Compound: use it as one tag, or recompose it from ProductCardMedia, ProductCardBody and their parts via useProductCard().

pnpm dlx shadcn@latest add "https://ecomcn.vercel.app/r/product-card.json"

lucide-react

button

components/ecomcn/product-card.tsx

lucide-react

button

components/ecomcn/product-card.tsx