Product Card

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.

Library

D2Studio UI

Framework

React

Type

component

License

MIT

Dependencies

lucide-react

Install

npx shadcn@latest add https://d2studio.dev/r/card-ecommerce-01.json

Files

• registry/default/components/card-ecommerce-01.tsx
• registry/default/ui/badge.tsx
• registry/default/ui/button.tsx
• registry/default/ui/card.tsx
• lib/utils.ts

Source

https://github.com/rajaaltus/d2studio-ui

Categories

• Card Components
• React Card Components
• Tailwind CSS Card Components
• Commerce Components
• React Commerce Components
• Tailwind CSS Commerce Components
• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• Product Card Components
• React Product Card Components

More from D2Studio UI

• AI Block
• AI Content Creator Card
• AI Content Creator Card v2
• AI Writing Assistant
• Bento 02
• Bento 03
• Bento 05
• Block 01
• Card
• D2 Card
• Dashboard 01
• Hover Card