Product Card

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

Interactive Demo

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

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project