DemoBuy

Getting Started with E-commerce Starter Kit

Last updated on 2026-03-20

The E-commerce Starter Kit is a production-ready Next.js template for building online stores. It includes 40 screens covering a complete storefront, multi-step checkout, customer accounts, and an admin dashboard — all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 35 UI components — primitives, storefront composites, admin composites, and layout components
  • 40 pages — storefront, checkout, auth, account, admin, and info pages
  • 4 route groups — (storefront), (auth), (account), (admin) with dedicated layouts
  • Light & dark mode — oklch design tokens with automatic theme switching

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm
  • A code editor — VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> ecommerce-starter-kit
cd ecommerce-starter-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the storefront.

Kit Overview

Area Screens Key Features
Storefront 20 Product listings, categories, search, wishlist, compare
Checkout 4 Cart, shipping, payment, order confirmation
Auth 3 Login, register, forgot password
Account 4 Profile, orders, order detail, settings
Admin 9 Dashboard, products, orders, customers, analytics, discounts, settings

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS v4 Utility-first styling with oklch tokens
shadcn/ui Component primitives
Lucide React Icon library
Recharts Admin dashboard charts
Embla Carousel Product galleries and featured carousel
next-themes Dark mode support

Next Steps

Next

Installation