Product Card

component

E-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that swaps with a blur, a derived sale badge and an add-to-bag button whose icon and label swap in place. Reduced-motion aware.

pnpm dlx shadcn@latest add "https://ui.d2studio.dev/r/card-ecommerce-01.json"

Sign In

Product Card

component

E-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that swaps with a blur, a derived sale badge and an add-to-bag button whose icon and label swap in place. Reduced-motion aware.

pnpm dlx shadcn@latest add "https://ui.d2studio.dev/r/card-ecommerce-01.json"

lucide-react

components/card-ecommerce-01.tsx

lucide-react

components/card-ecommerce-01.tsx