CommerceFree component
Product card
A product card that brings pricing, key details, and a primary action together. Use it for catalog listings, upgrades, or add-ons.
Preview
Open previewInstallation
Add product card to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-product-card.jsonUsage
TSXUsage example
import { MenaceProductCard } from "@/components/menace-product-card";
export default function Component() {
return <MenaceProductCard title="Command workspace" price="$29" />;
}Props
Key options and their defaults.
titleCommand workspace- Primary product or component name.
metricsThree proof points- Typed label and value pairs shown above the price.
previewReadyuncontrolled- Controlled action-completion state.
onActionundefined- Receives the native action-button event.
- Supports controlled and uncontrolled preview-ready states.
- Uses semantic article, heading, metric list, and button elements.
- Spring feedback automatically collapses to instant state changes when reduced motion is requested.