Ecommerce
The commerce-specific building blocks — everything the storefront needs on top of the general component set, plus the full page blocks composed from them.
Product components
Product cards with status badges, standardized price display, accessible variant pickers, a quantity stepper, add-to-cart states, ratings, search, and filters.
Product card
Price display
Variant — color
Variant — size
Quantity selector
Rating
Add to cart — states
Order status
Cart drawer (mini-cart)
Search
Filter group
Empty state
No results
Try a different search or filter.
Cart components
Cart line items, the slide-out cart drawer, and an order summary — prices flow through the Price primitive; the summary works from a totals preset or composable rows.
Orders
Order history in a Table, with fulfillment status badges. Common in account pages and store admin.
| Order | Date | Items | Status | Total |
|---|---|---|---|---|
| #CO-10428 | Jul 12 | Country Sourdough, Dark Rye | Delivered | $18.00 |
| #CO-10427 | Jul 12 | Rosemary Focaccia ×2 | Shipped | $16.00 |
| #CO-10425 | Jul 11 | Seeded Multigrain | Processing | $10.00 |
| #CO-10419 | Jul 10 | Buttery Croissant ×4 | Cancelled | $18.00 |
| #CO-10416 | Jul 9 | Olive Ciabatta | Refunded | $8.00 |
Page blocks
Full pages composed from these components. Browse the live demos; install any with shadcn add.
Hero, category grid, featured carousel, trust, newsletter
Grid, filters, sort, active chips, pagination
Gallery, variants, add-to-cart, tabs, related
Line items, promo code, summary, recommendations
Contact / shipping / payment, validation, review
Confirmation number, delivery, next steps