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

# Spree Commerce documentation: open-source commerce platform

> Spree is the open-source commerce engine that adapts to your stack, business model, and scale — from the first sale to global multi-channel growth.

export const Icon = ({children, className = ""}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    {children}
  </svg>;

export const QuickStartCard = ({icon, title, description, href, tag}) => <a href={href} className="group relative flex flex-col gap-3 rounded-xl bg-white dark:bg-transparent border border-gray-200 dark:border-zinc-800 p-5 hover:border-blue-200 dark:hover:border-zinc-700 hover:shadow-sm transition-all no-underline">
    <div className="flex items-center gap-3">
      <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 group-hover:bg-blue-50 group-hover:text-blue-600 dark:group-hover:bg-blue-950 dark:group-hover:text-blue-400 transition-colors">
        {icon}
      </div>
      <div className="flex items-center gap-2">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-50 m-0">{title}</h3>
        {tag && <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">{tag}</span>}
      </div>
    </div>
    <p className="text-sm text-gray-500 dark:text-zinc-400 m-0 leading-relaxed">{description}</p>
  </a>;

export const ConceptItem = ({icon, title, href}) => <a href={href} className="group flex items-center gap-3 rounded-lg bg-white dark:bg-transparent border border-gray-100 dark:border-zinc-800/50 px-3.5 py-3 hover:border-blue-100 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50 transition-all no-underline">
    <div className="flex items-center justify-center w-8 h-8 rounded-md bg-gray-100 group-hover:bg-blue-50 dark:bg-zinc-800 dark:group-hover:bg-zinc-800 text-gray-500 dark:text-zinc-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors shrink-0">
      {icon}
    </div>
    <span className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-blue-700 dark:group-hover:text-zinc-100 transition-colors">{title}</span>
  </a>;

export const UseCaseCard = ({icon, title, description, href}) => <a href={href} className="group flex flex-col gap-2 rounded-xl bg-white dark:bg-transparent border border-gray-200 dark:border-zinc-800 p-5 hover:border-blue-200 dark:hover:border-zinc-700 hover:shadow-sm transition-all no-underline">
    <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-zinc-400 group-hover:bg-blue-50 group-hover:text-blue-600 dark:group-hover:text-blue-400 dark:group-hover:bg-zinc-800 transition-colors">
      {icon}
    </div>
    <h4 className="text-sm font-semibold text-gray-900 dark:text-zinc-50 m-0">{title}</h4>
    <p className="text-xs text-gray-500 dark:text-zinc-400 m-0 leading-relaxed">{description}</p>
  </a>;

export const IntegrationItem = ({icon, name, href}) => <a href={href} className="group flex flex-col items-center gap-2 rounded-lg p-3 hover:bg-blue-50 dark:hover:bg-zinc-800/50 transition-colors no-underline">
    <div className="flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-gray-500 dark:text-zinc-400 group-hover:border-blue-100 dark:group-hover:border-zinc-600 transition-colors">
      {icon}
    </div>
    <span className="text-xs font-medium text-gray-600 dark:text-zinc-400 group-hover:text-blue-600">{name}</span>
  </a>;

export const SectionHeading = ({title, description}) => <div className="mb-6">
    <h2 className="text-xl font-semibold text-gray-900 dark:text-zinc-50 m-0">{title}</h2>
    {description && <p className="text-sm text-gray-500 dark:text-zinc-400 mt-1 m-0">{description}</p>}
  </div>;

export const ResourceLink = ({icon, title, description, href}) => <a href={href} className="group flex items-start gap-3 rounded-lg p-3 border border-transparent hover:bg-gray-50 hover:border-blue-300 dark:hover:bg-zinc-800/50 dark:hover:border-zinc-300 transition-colors no-underline">
    <div className="flex items-center justify-center w-8 h-8 rounded-md text-gray-400 dark:text-zinc-500 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors shrink-0 mt-0.5">
      {icon}
    </div>
    <div>
      <div className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-gray-900 dark:group-hover:text-zinc-100 transition-colors">{title}</div>
      <div className="text-xs text-gray-500 dark:text-zinc-500 mt-0.5">{description}</div>
    </div>
  </a>;

export const SmallIcon = ({children, className = ""}) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    {children}
  </svg>;

export const CopyCommand = ({command}) => {
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    navigator.clipboard.writeText(command);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return <button onClick={handleCopy} className="group/copy inline-flex items-center gap-3 rounded-lg bg-gray-950 dark:bg-zinc-800 pl-5 pr-3 py-3 font-mono text-sm text-gray-100 border-0 cursor-pointer hover:bg-gray-900 dark:hover:bg-zinc-700 transition-colors">
      <span className="text-gray-500 select-none">$</span>
      <span>{command}</span>
      <span className="ml-2 flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-gray-200 transition-colors" title="Copy to clipboard">
        {copied ? <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg> : <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>}
      </span>
    </button>;
};

<div className="relative max-w-5xl mx-auto px-4 py-16">
  {/* ── HERO ── */}

  <div className="text-center mb-16">
    <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-zinc-50 tracking-tight m-0">
      Spree Documentation
    </h1>

    <p className="max-w-2xl mx-auto mt-4 text-lg text-gray-500 dark:text-zinc-400">
      The open-source commerce engine that adapts to your stack, your business model, and your scale.
    </p>

    <div className="mt-6 flex flex-col items-center gap-2">
      <CopyCommand command="npx create-spree-app@latest my-store" />

      <a href="/docs/developer/getting-started/quickstart" className="text-sm text-gray-600 dark:text-zinc-500 hover:text-blue-600 dark:hover:text-zinc-300 no-underline transition-colors">
        More installation options →
      </a>
    </div>
  </div>

  {/* ── SECTION 1: QUICK START PATHS ── */}

  <div className="mb-16">
    <SectionHeading title="Get Started" description="Choose the path that matches how you work" />

    <div className="grid sm:grid-cols-2 gap-4">
      <QuickStartCard href="/developer/storefront/nextjs/quickstart" tag="Popular" icon={<Icon><rect width="18" height="18" x="3" y="3" rx="2" /><path d="m10 8 4 4-4 4" /></Icon>} title="Build a Storefront" description="Start with Next.js and our TypeScript SDK. Build a custom frontend connected to Spree's API." />

      <QuickStartCard href="/developer/tutorial/introduction" icon={<Icon><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" /></Icon>} title="Extend the Framework" description="Customize models, admin UI, and business logic. Full access to the platform internals." />

      <QuickStartCard href="/api-reference" icon={<Icon><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4z" /></Icon>} title="Explore the API" description="REST API with OpenAPI spec, filtering, pagination, and TypeScript types." />

      <QuickStartCard href="/developer/core-concepts/architecture" icon={<Icon><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></Icon>} title="Evaluate Spree" description="Architecture overview, use cases, and platform capabilities. Ideal for technical decision makers." />

      <QuickStartCard href="/developer/agentic/overview" tag="New" icon={<Icon><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></Icon>} title="Build with AI Agents" description="Agent skills, a docs MCP server, and LLM-ready documentation for Claude Code, Cursor, Copilot, and 60+ other tools." />

      <QuickStartCard href="/developer/tutorial/api" icon={<Icon><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4z" /></Icon>} title="Add Custom Resources" description="Generate a complete model + Store and Admin API surface with one command." />
    </div>
  </div>

  {/* ── SECTION 2: COMMERCE BUILDING BLOCKS ── */}

  <div className="mb-16">
    <SectionHeading title="Commerce Building Blocks" description="Explore core commerce concepts that power your store" />

    <div className="space-y-6">
      {/* Catalog */}

      <div>
        <div className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-zinc-500 mb-2 px-1">Catalog</div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          <ConceptItem href="/developer/core-concepts/products" icon={<SmallIcon><path d="m7.5 4.27 9 5.15" /><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></SmallIcon>} title="Products" />

          <ConceptItem href="/developer/core-concepts/pricing" icon={<SmallIcon><line x1="12" x2="12" y1="2" y2="22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></SmallIcon>} title="Pricing" />

          <ConceptItem href="/developer/core-concepts/inventory" icon={<SmallIcon><path d="M16 16h6" /><path d="M19 13v6" /><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14" /><path d="m7.5 4.27 9 5.15" /><path d="M3.3 7 12 12l8.7-5" /><path d="M12 22V12" /></SmallIcon>} title="Inventory" />

          <ConceptItem href="/developer/core-concepts/media" icon={<SmallIcon><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></SmallIcon>} title="Media" />
        </div>
      </div>

      {/* Cart & Checkout */}

      <div>
        <div className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-zinc-500 mb-2 px-1">Cart & Checkout</div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          <ConceptItem href="/developer/core-concepts/orders" icon={<SmallIcon><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></SmallIcon>} title="Orders" />

          <ConceptItem href="/developer/core-concepts/payments" icon={<SmallIcon><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></SmallIcon>} title="Payments" />

          <ConceptItem href="/developer/core-concepts/taxes" icon={<SmallIcon><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" /><path d="m9.5 14.5 5-5" /></SmallIcon>} title="Taxes" />

          <ConceptItem href="/developer/core-concepts/promotions" icon={<SmallIcon><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></SmallIcon>} title="Promotions" />
        </div>
      </div>

      {/* Fulfillment */}

      <div>
        <div className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-zinc-500 mb-2 px-1">Fulfillment</div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          <ConceptItem href="/developer/core-concepts/shipments" icon={<SmallIcon><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" /><path d="M15 18H9" /><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" /><circle cx="17" cy="18" r="2" /><circle cx="7" cy="18" r="2" /></SmallIcon>} title="Shipments" />

          <ConceptItem href="/developer/core-concepts/addresses" icon={<SmallIcon><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></SmallIcon>} title="Addresses" />

          <ConceptItem href="/developer/core-concepts/calculators" icon={<SmallIcon><rect width="16" height="20" x="4" y="2" rx="2" /><line x1="8" x2="16" y1="6" y2="6" /><line x1="16" x2="16" y1="14" y2="18" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></SmallIcon>} title="Calculators" />

          <ConceptItem href="/developer/core-concepts/adjustments" icon={<SmallIcon><path d="M12 20h9" /><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z" /></SmallIcon>} title="Adjustments" />
        </div>
      </div>

      {/* Platform */}

      <div>
        <div className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-zinc-500 mb-2 px-1">Platform</div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          <ConceptItem href="/developer/core-concepts/stores" icon={<SmallIcon><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" /><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" /><rect width="20" height="5" x="2" y="7" /></SmallIcon>} title="Stores" />

          <ConceptItem href="/developer/core-concepts/channels" icon={<SmallIcon><path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9" /><path d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5" /><circle cx="12" cy="9" r="2" /><path d="M16.2 4.8c2 2 2.26 5.11.8 7.47" /><path d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1" /><path d="M9.5 18h5" /><path d="m8 22 4-11 4 11" /></SmallIcon>} title="Channels" />

          <ConceptItem href="/developer/core-concepts/markets" icon={<SmallIcon><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></SmallIcon>} title="Markets" />

          <ConceptItem href="/developer/core-concepts/customers" icon={<SmallIcon><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></SmallIcon>} title="Customers" />
        </div>
      </div>

      {/* Extensibility */}

      <div>
        <div className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-zinc-500 mb-2 px-1">Extensibility</div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
          <ConceptItem href="/developer/core-concepts/events" icon={<SmallIcon><path d="m13 2-2 2.5h3L12 7" /><path d="M10 14v-3" /><path d="M14 14v-3" /><path d="M11 19c-1.7 0-3-1.3-3-3v-2h8v2c0 1.7-1.3 3-3 3Z" /><path d="M12 22v-3" /></SmallIcon>} title="Events" />

          <ConceptItem href="/developer/core-concepts/webhooks" icon={<SmallIcon><path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" /><path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" /><path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 .8 7.92" /></SmallIcon>} title="Webhooks" />

          <ConceptItem href="/developer/core-concepts/translations" icon={<SmallIcon><path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" /></SmallIcon>} title="Translations" />

          <ConceptItem href="/developer/core-concepts/metafields" icon={<SmallIcon><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" /></SmallIcon>} title="Metafields" />
        </div>
      </div>
    </div>
  </div>

  {/* ── SECTION 3: USE CASES ── */}

  <div className="mb-16">
    <SectionHeading title="Solutions & Use Cases" description="See how teams use Spree for different commerce models" />

    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <UseCaseCard href="/use-case/multi-store/model" icon={<SmallIcon><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" /><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" /><rect width="20" height="5" x="2" y="7" /></SmallIcon>} title="Multi-Store" description="Run multiple storefronts from one backend with shared catalog, inventory, and orders." />

      <UseCaseCard href="/use-case/marketplace/model" icon={<SmallIcon><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></SmallIcon>} title="Marketplace" description="Multi-vendor marketplace with vendor dashboards, split payments, and per-vendor fulfillment." />

      <UseCaseCard href="/use-case/b2b/b2b-commerce-model" icon={<SmallIcon><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" /><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" /><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" /><path d="M10 6h4" /><path d="M10 10h4" /><path d="M10 14h4" /><path d="M10 18h4" /></SmallIcon>} title="B2B Commerce" description="Wholesale pricing, company accounts, purchase orders, and buyer-specific catalogs." />

      <UseCaseCard href="/use-case/multi-tenant/multi-tenant-model" icon={<SmallIcon><rect width="7" height="7" x="14" y="3" rx="1" /><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3" /></SmallIcon>} title="Multi-Tenant" description="White-label SaaS, franchise networks, and multi-brand enterprise from a single deployment." />

      <UseCaseCard href="/use-case/digital-products/model" icon={<SmallIcon><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 18v-1" /><path d="M14 18v-1" /><path d="M10 12v-1" /><path d="M14 12v-1" /></SmallIcon>} title="Digital Products" description="Downloadable goods, licenses, and digital subscriptions with fulfillment automation." />

      <UseCaseCard href="/use-case/chatgpt-integration/chatgpt-shopping" icon={<SmallIcon><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></SmallIcon>} title="ChatGPT Shopping" description="AI-powered shopping experience with instant checkout via ChatGPT integration." />
    </div>
  </div>

  {/* ── SECTION 4: SDK & INTEGRATIONS ── */}

  <div className="mb-16">
    <div className="grid sm:grid-cols-2 gap-8">
      {/* SDK & Tools */}

      <div>
        <SectionHeading title="SDK & Tools" description="TypeScript-first developer experience" />

        <div className="space-y-2">
          <ResourceLink href="/developer/sdk/quickstart" icon={<SmallIcon><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></SmallIcon>} title="@spree/sdk" description="TypeScript SDK for Store and Admin APIs" />

          <ResourceLink href="/developer/create-spree-app/quickstart" icon={<SmallIcon><path d="M5 12h14" /><path d="M12 5v14" /></SmallIcon>} title="create-spree-app" description="Scaffold a new Spree project in seconds" />

          <ResourceLink href="/developer/cli/quickstart" icon={<SmallIcon><polyline points="4 17 10 11 4 5" /><line x1="12" x2="20" y1="19" y2="19" /></SmallIcon>} title="Spree CLI" description="Command-line tools for development" />

          <ResourceLink href="/developer/agentic/overview" icon={<SmallIcon><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></SmallIcon>} title="Agentic Development" description="Agent skills, docs MCP server, LLM-ready docs" />

          <ResourceLink href="/api-reference" icon={<SmallIcon><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4z" /></SmallIcon>} title="API Reference" description="OpenAPI spec with interactive explorer" />
        </div>
      </div>

      {/* Integrations */}

      <div>
        <SectionHeading title="Integrations" description="Pre-built connectors for popular services" />

        <div className="grid grid-cols-4 gap-1">
          <IntegrationItem href="/integrations/payments/stripe" name="Stripe" icon={<SmallIcon><rect width="20" height="14" x="2" y="5" rx="2" /><line x1="2" x2="22" y1="10" y2="10" /></SmallIcon>} />

          <IntegrationItem href="/integrations/payments/paypal" name="PayPal" icon={<SmallIcon><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="16" /><line x1="8" x2="16" y1="12" y2="12" /></SmallIcon>} />

          <IntegrationItem href="/integrations/payments/adyen" name="Adyen" icon={<SmallIcon><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4z" /></SmallIcon>} />

          <IntegrationItem href="/integrations/payments/razorpay" name="Razorpay" icon={<SmallIcon><path d="m13 2-2 2.5h3L12 7" /><path d="M12 22V7" /></SmallIcon>} />

          <IntegrationItem href="/integrations/analytics/google-analytics" name="GA4" icon={<SmallIcon><path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="m19 9-5 5-4-4-3 3" /></SmallIcon>} />

          <IntegrationItem href="/integrations/analytics/google-tag-manager" name="GTM" icon={<SmallIcon><path d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path d="M6 6h.01" /></SmallIcon>} />

          <IntegrationItem href="/integrations/marketing/klaviyo" name="Klaviyo" icon={<SmallIcon><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></SmallIcon>} />

          <IntegrationItem href="/integrations" name="All" icon={<SmallIcon><path d="M5 12h14" /><path d="M12 5v14" /></SmallIcon>} />
        </div>
      </div>
    </div>
  </div>

  {/* ── SECTION 5: MORE RESOURCES ── */}

  <div className="border-t border-gray-200 dark:border-zinc-800 pt-10">
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <a href="/docs/user" className="group text-center p-4 rounded-lg hover:bg-blue-50 dark:hover:bg-zinc-800/50 transition-colors no-underline">
        <div className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-blue-700 dark:group-hover:text-zinc-100">Admin Guide</div>
        <div className="text-xs text-gray-400 dark:text-zinc-500 mt-1">For store operators</div>
      </a>

      <a href="/docs/developer/deployment/database" className="group text-center p-4 rounded-lg hover:bg-blue-50 dark:hover:bg-zinc-800/50 transition-colors no-underline">
        <div className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-blue-700 dark:group-hover:text-zinc-100">Deployment</div>
        <div className="text-xs text-gray-400 dark:text-zinc-500 mt-1">Docker, AWS, Render</div>
      </a>

      <a href="/docs/developer/upgrades/quickstart" className="group text-center p-4 rounded-lg hover:bg-blue-50 dark:hover:bg-zinc-800/50 transition-colors no-underline">
        <div className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-blue-700 dark:group-hover:text-zinc-100">Upgrade Guides</div>
        <div className="text-xs text-gray-400 dark:text-zinc-500 mt-1">Version migration paths</div>
      </a>

      <a href="/docs/developer/contributing/quickstart" className="group text-center p-4 rounded-lg hover:bg-blue-50 dark:hover:bg-zinc-800/50 transition-colors no-underline">
        <div className="text-sm font-medium text-gray-700 dark:text-zinc-300 group-hover:text-blue-700 dark:group-hover:text-zinc-100">Contributing</div>
        <div className="text-xs text-gray-400 dark:text-zinc-500 mt-1">Help build Spree</div>
      </a>
    </div>
  </div>
</div>
