Back to components
Commerce component
Product Card & Grid
Product card with image, price, rating, badge overlay, add-to-cart, and responsive grid with search and sort.
Install
$ Run in your project root
pnpm dlx shadcn@latest add https://vibekit.desishub.com/r/ecommerce-product.jsonWhat it does
- Product card with image hover zoom, badge overlays, and quick-add overlay on hover
- Responsive grid (2→3→4 columns) with search filtering and sort dropdown
- Skeleton loading state and empty state for no results
- Mobile: always-visible add-to-cart button below fold
When to use
Use it
Product listing pages, catalogs, and storefronts needing a polished shopping experience.
Skip it
Simple text-only item lists, admin dashboards, or non-ecommerce contexts.