Introduction

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> ); };

{/* ════════════════════════════════════════════════════════════════════════ PAGE CONTENT ════════════════════════════════════════════════════════════════════════ */}

<div className="relative max-w-5xl mx-auto px-4 py-16"> <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> <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." /> </div> </div> <div className="mb-16"> <SectionHeading title="Commerce Building Blocks" description="Explore core commerce concepts that power your store" /> </div> <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> <div className="mb-16"> <div className="grid sm:grid-cols-2 gap-8"> <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="/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> <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 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="/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="/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="/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="/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>