CommerceBooster UI
Next.js 15 · Tailwind v4 · TypeScript
A comprehensive, production-ready storefront component library built on atomic design principles.
60+UI Components
15App Routes
5Component Layers
100%TypeScript
Tech Stack
Modern tooling for a high-performance storefront UI.
Next.js 15
App Router, SSR, file-based routing
Tailwind CSS v4
Utility-first, design tokens, dark mode
TypeScript
Full type safety across all components
shadcn/ui
Radix UI primitives, accessible by default
Lucide React
Icon library, consistent visual language
pnpm
Fast, disk-efficient package manager
File Structure
Project layout at a glance.
storefront-commercebooster-ui/
├── app/
│ ├── page.tsx ← component showcase
│ ├── layout.tsx, globals.css
│ ├── home/ product/ cart/ checkout/
│ ├── account/ favorites/ comparison/
│ ├── categories/ category/ search/
│ ├── login/ register/ article/
│ └── showcase/
├── components/
│ ├── ui/ ← shadcn/ui primitives
│ ├── atoms/ ← building blocks
│ └── *-showcase.tsx
├── public/ styles/ hooks/ lib/
├── COLOR_SYSTEM.md TYPOGRAPHY.md
└── next.config.mjs tsconfig.json
├── app/
│ ├── page.tsx ← component showcase
│ ├── layout.tsx, globals.css
│ ├── home/ product/ cart/ checkout/
│ ├── account/ favorites/ comparison/
│ ├── categories/ category/ search/
│ ├── login/ register/ article/
│ └── showcase/
├── components/
│ ├── ui/ ← shadcn/ui primitives
│ ├── atoms/ ← building blocks
│ └── *-showcase.tsx
├── public/ styles/ hooks/ lib/
├── COLOR_SYSTEM.md TYPOGRAPHY.md
└── next.config.mjs tsconfig.json
App Routes
All pages in the Next.js App Router.
PAGE/Component showcase
PAGE/homeStorefront homepage
PAGE/product/[slug]Product detail page
PAGE/categoriesCategory listing
PAGE/category/[slug]Category product grid
PAGE/cartShopping cart
PAGE/checkoutCheckout with quick pay
PAGE/searchSearch results
PAGE/comparisonProduct comparison
PAGE/favoritesWishlist / favorites
PAGE/accountAccount dashboard
PAGE/account/ordersOrder history
PAGE/loginLogin page
PAGE/registerRegistration page
PAGE/articleArticle / blog page
PAGE/showcaseComponent showcase route