Vibes logo

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

PropTypeDefault
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

PropTypeDefault
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 to product.description to remove default margin-bottom added by prose for the last child

2025-04-29

  • Added [&>div>*:first-child]:mt-0 to product.description to remove default margin-top added by prose for the first child
  • Added Reveal component to handle overflow content
  • Added prose & prose-sm classes to product.description to handle markdown content
  • Changed product.customFields to render a Description List element with a grid layout