Product
Product Card
A responsive product card with image, badges, rating, price, and quick actions for add-to-cart, quick view, and wishlist.
responsive
badge
interactive
Preview
new
Aurora Lamp
$129.00$179.00-28%
Installation
Run the shadcn CLI. Dependencies and the shared lib block come with it.
npx shadcn add product-cardUsage
Import
import { ProductCard } from "@/components/lumo/product-card"Example
<ProductCard
product={product}
onAddToCart={(product, variant) => addLine(product, variant)}
/>Props
| Prop | Type | Default | Required |
|---|---|---|---|
| product | Product | - | Required |
| onAddToCart | (product, variant) => void | - | |
| onQuickView | (product) => void | - | |
| onToggleWishlist | (product) => void | - | |
| isInWishlist | boolean | - | |
| showQuickActions | boolean | true | |
| layout | "default" | "compact" | "featured" | "default" | |
| locale | string | - |
All props accept standard HTML attributes unless otherwise specified.
Dependencies
Lumo blocks
npm packages
class-variance-authoritylucide-reactOwn every line
Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.