Compare Card
Installation
Run the following command
npx vibes@latest add compare-card
Usage
import { CompareCard } from '@/vibes/soul/primitives/compare-card';function Usage() { return ( <CompareCard imageSizes="(min-width: 42rem) 25vw, (min-width: 32rem) 33vw, (min-width: 28rem) 50vw, 100vw" product={{ id: '1', href: '#', title: 'Mini Bar Bag', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg', alt: 'Mini Bar Bag', }, subtitle: 'Blue/Green', price: '$65', badge: 'New', }} /> );}
API Reference
CompareCardProps
Prop | Type | Default |
---|---|---|
children* | ReactNode | |
className | string | |
product* | CompareProduct | |
addToCartLabel | string | 'Add to cart' |
descriptionLabel | string | 'Description' |
ratingLabel | string | 'Rating' |
otherDetailsLabel | string | 'Other details' |
addToCartAction | (id: string) => Promise<void> | |
imageSizes | string |
This component uses the Next.js Image component. The imageSizes
prop is passed directly to the sizes
prop of the Next.js Image component. For more details, refer to the Next.js Image documentation.
CompareProduct
Prop | Type | Default |
---|---|---|
description | string | |
customFields | Array<{ name: string; value: string }> |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --compare-card-divider: var(--contrast-100); --compare-card-label: var(--foreground); --compare-card-description: var(--contrast-400); --compare-card-field: var(--foreground); --compare-card-font-family-primary: var(--font-family-body); --compare-card-font-family-secondary: var(--font-family-mono);}
Changelog
2025-05-01
- Added
[&>div>*:last-child]:mb-0
toproduct.description
to remove defaultmargin-bottom
added byprose
for the last child
2025-04-29
- Added
[&>div>*:first-child]:mt-0
toproduct.description
to remove defaultmargin-top
added byprose
for the first child - Added
Reveal
component to handle overflow content - Added
prose
&prose-sm
classes toproduct.description
to handle markdown content - Changed
product.customFields
to render a Description List element with a grid layout