Storefront Suite

Quickstart

1. Ensure the registry is set up in Installation.
2. Run the registry command:

npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-catalog

Architecture

• StorefrontSystem handles catalog rendering directly for simple projects.
• StorefrontExperience handles stage orchestration for production flows.
• Catalog for browsing/search/facets with typed filters + sort + paging.
• PDP for product decision + variant selection + add-to-cart callbacks.
• Cart for quantity and pricing lifecycle, with deterministic totals helper.
• Checkout flow orchestration with step validation and submit hooks.

System Example

import { StorefrontExperience } from "@/components/systems/storefront/storefront-system"

<StorefrontExperience
  products={products}
  initialStage="catalog"
  onCheckoutSubmit={async (checkout, items) => {
    await placeOrder({ checkout, items })
  }}
/>

Install Commands

Demo

Live example: Storefront demo.

API Reference