NewTailwind CSS v4 & Dark Mode

Production-Ready E‑commerce Storefront

A complete Next.js storefront template built for Unchained Engine. Launch your online store in minutes with React, TypeScript, and Tailwind CSS.

npx @unchainedshop/create-storefront my-shop
Live DemoView on GitHub
shop.example.com
Storefront Homepage
shop.example.com
Storefront Homepage
Product PageProduct Details
Shopping CartShopping Cart

Everything You Need

A complete e‑commerce experience with all the features your store needs

🛍️

Full Shopping Experience

Complete e‑commerce journey from browsing to checkout

💳

Payment Ready

Stripe, Datatrans, and custom payment providers

🌍

Multi-language

Built-in i18n with translation management

🌓

Dark Mode

System-aware theme switching out of the box

📱

Responsive

Mobile-first design that works everywhere

🔐

WebAuthn

Passwordless authentication support

Modern Tech Stack

Built with the tools developers love

Next.js 14

React framework with App Router

TypeScript

Full type safety throughout

Tailwind CSS

Utility-first styling

GraphQL

Efficient data fetching

Apollo Client

State management

React 18

Component library

Complete Page Set Included

Every page you need for a professional e‑commerce store, ready to customize

🏠 Core Pages

  • Homepage with hero, featured products, categories
  • Product listing with filters and sorting
  • Product detail with variants, images, reviews
  • Category and collection pages
  • Search results with instant search

🛒 Shopping Flow

  • Shopping cart with quantity controls
  • Multi-step checkout process
  • Shipping method selection
  • Payment integration (Stripe, Datatrans)
  • Order confirmation and receipt

👤 Account Pages

  • Login and registration
  • Password reset flow
  • WebAuthn passwordless login
  • Account dashboard
  • Order history and tracking

📄 Content Pages

  • About us template
  • Contact form with validation
  • FAQ accordion component
  • Terms and privacy policy
  • 404 and error pages
Fully Customizable

Make It Yours

The storefront is designed to be a starting point, not a limitation. Every component is built with customization in mind, using clean, documented code that's easy to modify.

🎨 Tailwind Theming

Change colors, fonts, spacing, and breakpoints from a single config file. Extend or override any utility class.

🧩 Component Library

50+ pre-built components including buttons, forms, modals, cards, and navigation. All fully typed with TypeScript.

🔧 Hooks & Utilities

Custom React hooks for cart management, authentication, product data, and more. Reuse logic across your app.

📐 Layout System

Flexible layout components for headers, footers, sidebars, and content areas. Responsive grid system included.

tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: class="code-string">'#your-color',
          secondary: class="code-string">'#your-color',
        }
      },
      fontFamily: {
        sans: [class="code-string">'Your Font', class="code-string">'system-ui'],
      }
    }
  }
}

Built for Performance

Fast load times mean better conversions. Every optimization is built in from the start.

98

Lighthouse Score

Consistently achieves 95+ scores across Performance, Accessibility, Best Practices, and SEO.

<1s

First Contentful Paint

Server-side rendering and optimized critical path ensure instant visual feedback.

0

Layout Shift

Proper image dimensions and font loading prevent annoying content jumps.

Edge

CDN Ready

Deploy to Vercel, Netlify, or any edge network for global low-latency delivery.

✓ Automatic image optimization with Next.js Image
✓ Code splitting and lazy loading
✓ GraphQL query batching and caching
✓ Prefetching for instant page transitions
✓ Static generation for content pages
✓ Incremental static regeneration
Developer Experience

A Joy to Work With

We obsess over developer experience because happy developers build better products. Every aspect of the codebase is designed for clarity and productivity.

  • Full TypeScript - Catch errors at compile time, enjoy intelligent autocomplete
  • ESLint + Prettier - Consistent code style across your team
  • Hot Module Replacement - See changes instantly without losing state
  • Generated GraphQL Types - Type-safe API calls with auto-generated types
  • Component Storybook - Browse and test components in isolation
  • Testing Setup - Jest and React Testing Library configured
Terminal
$npx @unchainedshop/create-storefront my-shop
Creating new storefront in ./my-shop
Installing dependencies...
✓ Dependencies installed
✓ TypeScript configured
✓ Tailwind CSS configured
✓ GraphQL codegen configured

Success! Run these commands:
$cd my-shop && npm run dev

Why Choose This Template?

There are many ways to build an e‑commerce frontend. Here's why our template stands out.

vs. Building from Scratch

Save months of development time. Get authentication, cart management, checkout flows, and payment integration out of the box. Focus on what makes your store unique.

vs. Shopify/Hosted Themes

Full control over your code and data. No platform lock-in, no monthly theme fees, no limitations on customization. Deploy anywhere you want.

vs. Generic Templates

Purpose-built for Unchained Engine with perfect API integration. Not a generic template retrofitted for e‑commerce—every component is designed for selling products.

vs. Older Tech Stacks

Modern React 18 with Server Components, Tailwind CSS v4, and TypeScript. No legacy jQuery, no outdated build tools. Built for the next decade of web development.

npm init @unchainedshop

Seamless Engine Integration

Built specifically for Unchained Engine with perfect compatibility and optimal performance.

  • GraphQL API with Apollo Client
  • Real-time cart & order updates
  • Server-side rendering for SEO
  • Auto-generated TypeScript types
  • Optimized caching strategies
Learn about Unchained Engine

Ready to Build?

Start building your e‑commerce store today with the Unchained Storefront Template. Clone the repository, configure your backend, and launch your custom storefront in minutes.

  • Production-ready codebase
  • Full checkout flow included
  • Deploy anywhere
Read DocumentationGet Started