> ## Documentation Index
> Fetch the complete documentation index at: https://www.commercengine.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Starters

> Production-ready storefront templates. Three designs, each with a 1:1 clone across five frameworks, with catalog, cart, checkout, SEO and agent tools wired from the first commit.

export const SiteFooter = () => {
  const BRAND = "https://images.tarkai.com/Commerce_Engine/Brand%20Assets/04%20-%20Brand%20Architecture/svg";
  const columns = [{
    heading: "Documentation",
    links: [{
      label: "Quickstart",
      href: "/storefront/quickstart"
    }, {
      label: "Starters",
      href: "/starters/overview"
    }, {
      label: "Hosted Checkout",
      href: "/hosted-checkout/overview"
    }, {
      label: "API reference",
      href: "/api-reference/getting-started"
    }]
  }, {
    heading: "Packages",
    links: [{
      label: "storefront",
      href: "/sdk/installation"
    }, {
      label: "checkout",
      href: "/hosted-checkout/overview"
    }, {
      label: "seo",
      href: "/seo-ai/seo"
    }, {
      label: "ai",
      href: "/seo-ai/ai"
    }, {
      label: "All packages on npm",
      href: "https://www.npmjs.com/org/commercengine",
      external: true
    }]
  }, {
    heading: "Build with AI",
    links: [{
      label: "AI-assisted development",
      href: "/ai/overview"
    }, {
      label: "Agent skills",
      href: "https://github.com/commercengine/skills",
      external: true
    }, {
      label: "Starter projects",
      href: "https://github.com/tark-ai/ce-starter-projects",
      external: true
    }, {
      label: "LLM docs",
      href: "https://llm-docs.commercengine.io",
      external: true
    }]
  }, {
    heading: "Support",
    links: [{
      label: "Community Slack",
      href: "https://join.slack.com/t/commerceengine/shared_invite/zt-47mq3c5f9-9vNpgkV2GSu7SrGrGFbrOQ",
      external: true
    }, {
      label: "Status",
      href: "https://ce-status.instatus.com/",
      external: true
    }, {
      label: "Contact us",
      href: "mailto:support@commercengine.io",
      external: true
    }, {
      label: "commercengine.io",
      href: "https://www.commercengine.io",
      external: true
    }]
  }];
  const socials = [{
    label: "GitHub",
    href: "https://github.com/tark-ai",
    d: "M12 2A10 10 0 0 0 8.84 21.5c.5.08.66-.23.66-.5v-1.69C6.73 19.91 6.14 18 6.14 18A2.69 2.69 0 0 0 5 16.5c-.91-.62.07-.6.07-.6a2.1 2.1 0 0 1 1.53 1 2.15 2.15 0 0 0 2.91.83 2.16 2.16 0 0 1 .63-1.34c-2.14-.25-4.39-1.07-4.39-4.77a3.35 3.35 0 0 1 1-2.6 3.1 3.1 0 0 1 .08-2.42s.84-.27 2.75 1a9.63 9.63 0 0 1 5 0c1.91-1.29 2.75-1 2.75-1a3.1 3.1 0 0 1 .08 2.42 3.35 3.35 0 0 1 1 2.6c0 3.71-2.26 4.52-4.41 4.76a2.42 2.42 0 0 1 .69 1.88v2.79c0 .27.16.59.67.5A10 10 0 0 0 12 2Z"
  }, {
    label: "X",
    href: "https://twitter.com/commercengine",
    d: "M18.9 2H22l-7.1 8.1L23 22h-6.6l-5.1-6.7L5.4 22H2.3l7.6-8.7L1.6 2h6.7l4.6 6.1L18.9 2Zm-1.1 18h1.7L7.3 3.7H5.5L17.8 20Z"
  }, {
    label: "LinkedIn",
    href: "https://www.linkedin.com/company/commercengine",
    d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.05a4.2 4.2 0 0 1 3.77-2.07c4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.5c0-1.31-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9V21h-4V9Z"
  }];
  return <footer className="ce-footer">
      <div className="ce-footer-inner">
        <div className="ce-footer-brand">
          <img src={`${BRAND}/CE_Developers_black.svg`} alt="Commerce Engine Developers" className="ce-footer-logo-light" width="180" height="28" />
          <img src={`${BRAND}/CE_Developers_white.svg`} alt="" aria-hidden="true" className="ce-footer-logo-dark" width="180" height="28" />
          <p>The modern headless commerce platform for building scalable e-commerce.</p>
          <div className="ce-footer-socials">
            {socials.map(s => <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d={s.d} />
                </svg>
              </a>)}
          </div>
        </div>

        <div className="ce-footer-cols">
          {columns.map(col => <div key={col.heading} className="ce-footer-col">
              <p className="ce-footer-heading">{col.heading}</p>
              <ul>
                {col.links.map(link => <li key={link.label}>
                    <a href={link.href} {...link.external ? {
    target: "_blank",
    rel: "noopener noreferrer"
  } : {}}>
                      {link.label}
                    </a>
                  </li>)}
              </ul>
            </div>)}
        </div>
      </div>

      <div className="ce-footer-bar">
        <span>© {new Date().getFullYear()} Commerce Engine</span>
        <span>Built for developers shipping commerce.</span>
      </div>
    </footer>;
};

export const StarterTemplates = ({templates = [], defaultFramework = "nextjs"}) => {
  const [selected, setSelected] = useState(() => Object.fromEntries(templates.map(t => [t.slug, defaultFramework])));
  const [copied, setCopied] = useState(null);
  const pick = (slug, id) => setSelected(prev => ({
    ...prev,
    [slug]: id
  }));
  useEffect(() => {
    if (!copied) return;
    const timer = setTimeout(() => setCopied(null), 2000);
    return () => clearTimeout(timer);
  }, [copied]);
  const copy = async (text, key) => {
    if (typeof navigator === "undefined" || !navigator.clipboard) return;
    try {
      await navigator.clipboard.writeText(text);
      setCopied(key);
    } catch {}
  };
  const Arrow = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M7 17 17 7M9 7h8v8" />
    </svg>;
  const Check = () => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>;
  return <div className="ce-starters">
      {templates.map(template => {
    const activeId = selected[template.slug] ?? defaultFramework;
    const framework = template.frameworks.find(f => f.id === activeId) ?? template.frameworks[0];
    return <article key={template.slug} className="ce-starter-card">
            <div className="ce-starter-preview">
              {}
              <div className="ce-frame">
                <div className="ce-frame-bar">
                  <span className="ce-term-dot-red" />
                  <span className="ce-term-dot-amber" />
                  <span className="ce-term-dot-green" />
                  <span className="ce-frame-url">
                    {framework.demoUrl.replace(/^https?:\/\//, "")}
                  </span>
                </div>
                <div className="ce-frame-viewport">
                  <img src={template.previewImage} alt={`${template.name} storefront preview — ${template.shortDescription}`} loading="lazy" />
                </div>
              </div>
            </div>

            <div className="ce-starter-body">
              <span className="ce-starter-category">{template.category}</span>
              <h3 className="ce-starter-name">{template.name}</h3>
              <p className="ce-starter-desc">{template.shortDescription}</p>

              <ul className="ce-starter-features">
                {template.features.map(feature => <li key={feature}>{feature}</li>)}
              </ul>

              <div className="ce-starter-foot">
                {}
                <fieldset className="ce-fw">
                  <legend>Framework</legend>
                  <div className="ce-fw-grid">
                    {template.frameworks.map(f => {
      const isOn = f.id === activeId;
      return <label key={f.id} className="ce-fw-option" data-active={isOn}>
                          <input type="radio" name={`framework-${template.slug}`} value={f.id} checked={isOn} onChange={() => pick(template.slug, f.id)} />
                          <span className="ce-fw-mark">
                            <img src={f.icon} alt="" aria-hidden="true" loading="lazy" />
                          </span>
                          <span className="ce-fw-name">{f.name}</span>
                          {isOn ? <Check /> : <span className="ce-fw-spacer" aria-hidden="true" />}
                        </label>;
    })}
                  </div>
                </fieldset>

                <p aria-live="polite" className="sr-only">
                  {`${framework.name} selected. The demo and source links now open the ${framework.name} build of ${template.name}.`}
                </p>

                {}
                <div className="ce-starter-cmd">
                  <code>
                    npm create commercengine@latest -- --template {template.slug} --framework{" "}
                    {framework.id}
                  </code>
                  <button type="button" className="ce-cmd-copy" data-copied={copied === template.slug} aria-label={`Copy the create command for ${template.name} on ${framework.name}`} onClick={() => copy(`npm create commercengine@latest -- --template ${template.slug} --framework ${framework.id}`, template.slug)}>
                    {copied === template.slug ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <polyline points="20 6 9 17 4 12" />
                      </svg> : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
                      </svg>}
                  </button>
                </div>

                <div className="ce-starter-actions">
                  <a className="ce-btn ce-btn--primary" href={framework.demoUrl} target="_blank" rel="noopener noreferrer" aria-label={`View live demo — ${template.name} for ${framework.name} (opens in new tab)`}>
                    View demo
                    <Arrow />
                  </a>
                  <a className="ce-btn ce-btn--secondary" href={framework.repositoryUrl} target="_blank" rel="noopener noreferrer" aria-label={`View source — ${template.name} for ${framework.name} (opens in new tab)`}>
                    View source
                  </a>
                </div>
              </div>
            </div>
          </article>;
  })}
    </div>;
};

export const frameworks = [{
  id: "react",
  name: "React",
  suffix: "",
  icon: "https://svgl.app/library/react_light.svg"
}, {
  id: "nextjs",
  name: "Next.js",
  suffix: "-next",
  icon: "https://svgl.app/library/nextjs_icon_dark.svg"
}, {
  id: "tanstack-start",
  name: "TanStack",
  suffix: "-tanstack",
  icon: "https://svgl.app/library/tanstack.svg"
}, {
  id: "astro",
  name: "Astro",
  suffix: "-astro",
  icon: "https://svgl.app/library/astro-icon-light.svg"
}, {
  id: "sveltekit",
  name: "SvelteKit",
  suffix: "-svelte",
  icon: "https://svgl.app/library/svelte.svg"
}];

export const buildsFor = slug => frameworks.map(f => ({
  id: f.id,
  name: f.name,
  icon: f.icon,
  demoUrl: `https://${slug}${f.suffix}.demo.commercengine.com`,
  repositoryUrl: `https://github.com/tark-ai/ce-starter-projects/tree/main/apps/${slug}${f.suffix}`
}));

export const templates = [{
  slug: "linea",
  name: "Linea",
  category: "Jewellery & Luxury",
  previewImage: "/images/starters/linea.webp",
  shortDescription: "An elegant jewellery storefront designed for premium brands, editorial product storytelling, and refined shopping experiences.",
  features: ["Editorial homepage", "Product listing", "Product filtering", "Product detail experience", "Wishlist", "Cart", "Checkout flow", "Responsive navigation", "Commerce Engine integration"],
  frameworks: buildsFor("linea")
}, {
  slug: "little-things",
  name: "Little Things",
  category: "Electronics & Lifestyle",
  previewImage: "/images/starters/little-things.webp",
  shortDescription: "A modern electronics storefront designed for product-rich catalogues, bold merchandising, and fast product discovery.",
  features: ["Product-focused homepage", "Category navigation", "Product listing", "Product filtering", "Product detail experience", "Wishlist", "Cart", "Checkout flow", "Commerce Engine integration"],
  frameworks: buildsFor("little-things")
}, {
  slug: "soja",
  name: "SOJA",
  category: "Beauty & Cosmetics",
  previewImage: "/images/starters/soja.webp",
  shortDescription: "A refined beauty storefront designed for skincare, cosmetics, and ritual-led product storytelling.",
  features: ["Editorial homepage", "Category navigation", "Product listing", "Product filtering", "Product detail experience", "Wishlist", "Cart", "Checkout flow", "Commerce Engine integration"],
  frameworks: buildsFor("soja")
}];

<div className="ce-home">
  <section className="ce-section ce-section--wide">
    <p className="ce-eyebrow">Starters</p>

    <h1 className="ce-page-title">Three storefronts,<br />five frameworks each</h1>

    <p className="ce-page-lede">
      Same design, same capabilities — only the stack changes. Every build is a working storefront on real Commerce Engine data, not a scaffold you have to finish. Each one is also the clearest demonstration of the packages working together: <code>@commercengine/storefront</code> for catalog and session, <code>@commercengine/checkout</code> for cart and payment, <code>@commercengine/seo</code> for discovery, and <code>@commercengine/ai</code> for browser agents.
    </p>

    <div className="ce-starter-hero-cmd">
      <span className="ce-starter-hero-label">Start any of them</span>
      <code>npm create commercengine\@latest</code>
      <span className="ce-starter-hero-note">pnpm, yarn and bun work the same way</span>
    </div>

    <StarterTemplates templates={templates} />
  </section>

  <section className="ce-section ce-section--wide">
    <h2 className="ce-h2">What ships wired up</h2>

    <p className="ce-lede">Everything below works on first run. No scaffolding, no boilerplate — the commerce layer is already connected.</p>

    <CardGroup cols={2}>
      <Card title="Catalog and discovery" icon="store" href="/docs/storefront/catalog">
        Product listing, filtering, faceted search, and product detail pages backed by the real catalog API.
      </Card>

      <Card title="Cart and checkout" icon="bag-shopping" href="/docs/hosted-checkout/overview">
        Hosted Checkout in provided mode, with the Storefront SDK owning the session and tokens synced both ways.
      </Card>

      <Card title="Accounts and orders" icon="user" href="/docs/storefront/my-account">
        Anonymous sessions, OTP and password login, addresses, wishlist, and order history.
      </Card>

      <Card title="SEO and agent tools" icon="magnifying-glass" href="/docs/seo-ai/overview">
        Structured data, canonical metadata, sitemaps, `llms.txt`, and WebMCP tools for browser agents.
      </Card>
    </CardGroup>

    <h2 className="ce-h2">From starter to storefront in three steps</h2>

    <Steps>
      <Step title="Choose a template">
        Pick the storefront experience that best suits the brand — Linea for premium and editorial, Little Things for product-rich catalogues, SOJA for beauty and ritual-led storytelling.
      </Step>

      <Step title="Select your framework">
        Choose the framework your team already uses. The design and capabilities stay identical; only the stack changes.
      </Step>

      <Step title="Connect Commerce Engine and customise">
        Point the starter at your store, then adapt it. See the [Quickstart](/docs/storefront/quickstart) for credentials and environment setup.
      </Step>
    </Steps>

    <h2 className="ce-h2">Framework matrix</h2>

    <p className="ce-lede">Every template ships in all five storefront builds.</p>

    | Framework                                         | Rendering                 | SDK binding                                |
    | ------------------------------------------------- | ------------------------- | ------------------------------------------ |
    | [React](/docs/sdk/react-integration)                   | Client-side SPA (Vite)    | `@commercengine/storefront`                |
    | [Next.js](/docs/sdk/nextjs-integration)                | SSG with ISR (App Router) | `@commercengine/storefront/nextjs`         |
    | [TanStack Start](/docs/sdk/tanstack-start-integration) | SSG with link crawling    | `@commercengine/storefront/tanstack-start` |
    | [Astro](/docs/sdk/astro-integration)                   | SSG with island hydration | `@commercengine/storefront/astro`          |
    | [SvelteKit](/docs/sdk/sveltekit-integration)           | SSG with static adapter   | `@commercengine/storefront/sveltekit`      |

    <Note>
      Node.js is a server-side SDK integration rather than a storefront build, so it has no starter template. See [Node.js](/docs/sdk/nodejs-integration) for backend usage.
    </Note>

    <h2 className="ce-h2">Build one with an agent</h2>

    <p className="ce-lede">The starters double as executable documentation for coding agents — they are the reference the skills package points at when generating a storefront.</p>

    <CardGroup cols={2}>
      <Card title="Production Starters" icon="code-branch" href="/docs/ai/starter-projects">
        How agents should read and use the starter repository.
      </Card>

      <Card title="Production Storefront" icon="wand-magic-sparkles" href="/docs/ai/production-storefront">
        The execution contract for building a production storefront from scratch.
      </Card>
    </CardGroup>
  </section>

  <SiteFooter />
</div>