Product Card

A versatile card component for displaying product information with multiple style variants.

Interactive Demo

ProductCard is an optional React convenience over the mockup URL. It bundles the image, price, and category — nothing here is required to render.

Try different card variants using the variant switcher. Select artwork to see it displayed in the card:

Loading playground...

Component Props

variant"default" | "overlay" | "minimal"

Card style variant. 'overlay' shows info over image, 'minimal' is compact, 'default' has padding.

showPriceboolean

Whether to display the product price. Defaults to false.

showCategoryboolean

Whether to display the product category/tag. Defaults to true.

onClick() => void

Click handler for the card. When provided, renders as a button.

classNamestring

Additional CSS classes for the card container.

Installation

npm install @snowcone-app/ui

Styling — your Tailwind v4 build compiles it. In your global stylesheet, add @import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.