The Next.js eCommerce template that already works

Everything a store needs, already wired

Not mock screens. Each module is an engine shared by all 3 stores, drawn 3 ways, and running on the demo data the moment you clone.

Find and choose

Catalog filters and sort

The sidebar renders whatever filters your data returns: price, color families, brands, sizes, ratings. Add a filter in the dataset, never in a component. 7 sort orders, numbered pages or load more, and every refinement lives in the URL, so a filtered page is a shareable link.

Filter[] from your adapter?sort=price-asc

Search, by text or by photo

Product pages that sell

Compare and save

Filter[] from your adapter?sort=price-asc

AI surfaces, ready for your model

Every AI feature ships as a finished interface with a demo answer and 1 prop to connect your model. No SDK, no vendor, no lock-in: wire a Server Action and the shopper reads the reply.

The demos answer with sample replies. Nothing calls a model until you connect one.

Shopping assistant

A floating panel on every store that greets, offers prompts, and keeps a thread; a bottom drawer on phones so the keyboard never covers it. Wire onAsk to your model or your support stack.

onAsk

Review summary

Smart comparison

Product questions

Visual search

onAsk

Your backend, behind 1 interface

Screens never call a platform. They call a typed CommerceAdapter: 22 required methods, 22 optional ones that render nothing when missing, and 1 line to bind yours. Blog and auth have seams of their own, so a CMS and a commerce backend swap independently.

1. 01Shop the demosEvery page, no backend.
2. 02Keep 1 storepnpm use-demo <demo>
3. 03Bind your adapter1 line in config.ts.
4. 04ShipAnywhere Next.js runs.

import 'server-only' import type { CommerceAdapter } from './adapter'import { demoAdapter } from './adapters/demo' /** * The adapter every commerce read and write goes through. Connect your backend * by writing a {@link CommerceAdapter} and putting it here in place of the demo * data; the `commerce-adapter` skill walks through it. * * This module is server-only, so an adapter can read its credentials from * `process.env` and they never reach the client bundle. */export const adapter: CommerceAdapter = demoAdapter /** * Whether the demo data is still the adapter in use. Sample account data that * names its products, such as the demo offers, shows only while it is. */export const isDemoCommerce = adapter === demoAdapter

Built the way you would build it

Modern Next.js, strict TypeScript, and a design system whose source you can read.

• Next.js 16 App Router

  React Server Components, Server Actions for every write, typed routes, and 1 root layout per store so overlays inherit its theme.

• TypeScript end to end

  Strict types from the adapter interface to the route props. 37 Server Actions re-validate their input on the server.

• Tailwind CSS v4 tokens

  Role-based tokens in @theme, no config file, no hex in markup. A store restyles with a few hundred lines of CSS on data-slot hooks.

• Appica UI, open source

  74 accessible components on Base UI primitives, maintained by the same team, with icons and country flags.

• Dark mode and RTL-ready

  Every screen in both themes. Logical properties and rtl: variants throughout, with the 2-line switch documented.

• Accessible by design

  WCAG 2.2 AA as the target: keyboard everywhere, visible focus, 24px targets, and reduced motion honored by every animation.

• Ready for your AI agent

  AGENTS.md, 17 module guides, and 5 Agent Skills in the open format. Claude Code, Cursor, Codex, and Copilot pick the rules up without being told.

  • AGENTS.md
  • CLAUDE.md
  • .agents/skills/
  • appica-ui/
  • commerce-adapter/
  • motion/
  • react-best-practices/
  • single-store/
  • src/lib/*/AGENTS.md17 module guides

• Documented and verified

  JSDoc on every exported component, hook, and type, so the API shows on hover. pnpm verify runs ESLint, tsc, and Prettier before anything ships.