Storefront starter app

Pro starter app. Needs a tealmac UI Pro licence. Set it up once on /pro/login, see Install Pro.

Storefront is a whole shop, not a single page: 11 routes that share one layout, one cart and one catalogue. It ships for a fictional home goods brand called Halden, so you can see how every screen behaves with real-looking data before you swap in your own. Open the live preview.

What's included

The header carries a search dialog (Ctrl or Cmd + K), the wishlist, the account and a cart drawer that opens from every page.

Every list has loading, empty and error states. Preview them by adding ?state=loading, ?state=empty or ?state=error to the shop, orders or wishlist URL. Product names, customer names and prices include long and awkward values on purpose, so you can see how the layout copes.

Install

Add your licence key and the Pro registry once per project. The full steps are in Install Pro; in short:

CopyTEALMAC_UI_LICENSE_KEY=your-licence-key

Copy{
  "registries": {
    "@tealmac-pro": {
      "url": "https://ui.tealmac.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${TEALMAC_UI_LICENSE_KEY}"
      }
    }
  }
}

Then install the app:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @tealmac-pro/storefront-starter
Copy

The CLI also installs the free tealmac UI components and shadcn primitives the app uses.

Where the files land

• components/tealmac-pro/storefront-starter/ holds the shell, the shared pieces, the cart store, the data and one file per page.
• app/templates/storefront-starter/**/page.tsx are thin route files, one per page. Move them anywhere in your app/ folder (for example to app/(shop)/) and update the links in storefront-starter-data.ts (BASE and storeHref).

Connect your own shop

Everything the app shows comes from four places, so replacing the demo is a short job:

1. Catalogue. storefront-starter-data.ts exports products, categories and the review helpers. Replace them with calls to your commerce backend or CMS. Pages read products through getProduct and products, so changing those two is enough to start.
2. Cart and wishlist. storefront-starter-store.ts keeps both in localStorage and exposes storeActions (add, setQty, remove, toggleWish, applyPromo). Swap each body for a call to your cart API; the components only use useStore() and storeActions.
3. Payment. The payment step is an interface only: no card data leaves the page. In storefront-starter-checkout.tsx, the pay function marks the spot. Create a payment or checkout session on your server, confirm it there, then redirect to the confirmation page. Use your provider's hosted fields for card details rather than reading the inputs yourself.
4. Orders. orders in the data file feeds order history and the two order pages. Fetch them from your order system in a server component or an effect.

Product photos are loaded from images.unsplash.com through plain <img> tags. Replace them with your own product photography (the photo field and the Photo component) before you go live.

Promo codes in the demo (HALDEN10, WELCOME15) are checked in the browser. Always validate real codes and prices on your server.

Theming

The app uses semantic tokens only (background, card, primary, muted, border, ring and the chart colours). It looks right with the default tealmac theme and every theme preset, in light and dark, and follows your radius setting. Product swatches are the one place with fixed colours, because they show the colour of the product itself.

Accessibility

• One h1 and a main landmark per page, a skip link, and labelled navigation regions.
• The cart drawer is a dialog: focus moves in, is trapped, and returns to the bag button when it closes.
• Colour and size options are radio groups with arrow key navigation; sold-out options are marked and skipped.
• The product gallery uses the tabs pattern, and the main photo opens a full-screen viewer you can browse with the arrow keys.
• Adding to the bag, saving an item and filtering announce their result to screen readers.
• Checkout fields have visible labels, autocomplete values and inline error messages, and a summary of errors takes focus on submit.
• Motion is limited to short transitions and respects prefers-reduced-motion.