Product Card

Commerce product card primitive.

Use this for shopping, pricing, and checkout surfaces where the parts need to work together.

Preview and code

Loading preview...

Install

If this is your first Circle install, start with Get started.

pnpm dlx shadcn@latest add @blocks/product-card

Use this when

This is a composed surface. Prefer the parent block when you want the full pattern, and reach for the sub-parts only when you need to customize the composition.

Dependencies

Registry

@circle-ui/badge

@circle-ui/button

@circle-ui/textbox

@circle-ui/utils

Source

The raw JSON payload powering this entry — useful when debugging registry output.

registry/berlin/blocks/commerce.tsx

pnpm dlx shadcn@latest add https://registry.circle.health/blocks/product-card.json

Open /blocks/product-card.json