Product Card

Versatile e-commerce product card with image, badge, save button, content, price, and action slots. Supports orientations, skeleton states, and price-unavailable states.

core/product-card

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Click the heart to toggle saved state.

New

Coastal Retreat Package

3-night stay with breakfast included. Stunning ocean views.

R 2 400 / night

API Reference

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Card layout orientation.
`asChild`	`boolean`	`false`	Render root as a Slot for custom elements.