Product Card
Installation
Run the following command
npx vibes@latest add product-cardUsage
import { ProductCard } from '@/vibes/soul/primitives/product-card';function Usage() { return ( <ProductCard product={{ id: '1', href: '#', title: 'Product Name', }} /> );}You will need to nest the ProductCard component(s) within a CompareDrawerProvider if you set the showCompare prop to true.
import { CompareDrawerProvider } from '@/vibes/soul/primitives/compare-drawer';import { ProductCard } from '@/vibes/soul/primitives/product-card';function Usage() { return ( <CompareDrawerProvider items={[]}> <ProductCard product={{ id: '1', href: '#', title: 'Product Name', }} showCompare /> </CompareDrawerProvider> );}API Reference
ProductCardProps
| Prop | Type | Default |
|---|---|---|
className | string | |
colorScheme | 'light' | 'dark' | 'light' |
aspectRatio | '5:6' | '3:4' | '1:1' | '5:6' |
showCompare | boolean | false' |
imagePriority | boolean | false |
imageSizes | string | '(min-width: 80rem) 20vw, (min-width: 64rem) 25vw, (min-width: 42rem) 33vw, (min-width: 24rem) 50vw, 100vw' |
compareLabel | string | |
compareParamName | string | |
borderRadius | 'none' | 'small' | 'medium' | 'large' | 'large' |
product* | Product |
Product
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | Price | |
subtitle | string | |
badge | string | |
rating | number |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --product-card-focus: var(--primary); --product-card-light-offset: var(--background); --product-card-light-background: var(--contrast-100); --product-card-light-title: var(--foreground); --product-card-light-subtitle: color-mix(in oklab, var(--foreground) 75%, transparent); --product-card-dark-offset: var(--foreground); --product-card-dark-background: var(--contrast-500); --product-card-dark-title: var(--background); --product-card-dark-subtitle: color-mix(in oklab, var(--background) 75%, transparent); --product-card-font-family: var(--font-family-body); --product-card-border-radius: 1rem;}