Getting Started with Inventory Management Kit
Last updated on 2026-04-05
The Inventory Management Kit is a production-ready Next.js template for building a modern inventory and warehouse management dashboard. It includes 32 screens covering product catalogs, purchase orders, supplier management, multi-warehouse stock tracking, reporting, and more -- all built with Tailwind CSS v4 and shadcn/ui.
What's Included
- 40+ UI components -- primitives, inventory composites, chart components, and layout components
- 32 pages -- dashboard, products, purchase orders, suppliers, warehouses, stock management, reports, settings, auth, and utility pages
- 2 route groups --
(dashboard)for the main inventory app,(auth)for login and registration - Light & dark mode -- oklch design tokens with an inventory-tuned theme
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> inventory-management-kit
cd inventory-management-kit
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm dev
Open http://localhost:3000 to browse the inventory dashboard.
Kit Overview
| Area | Screens | Key Features |
|---|---|---|
| Dashboard | 1 | KPI cards, stock level charts, low-stock alerts, recent activity |
| Products | 5 | List with search/filters, detail, edit, create, categories |
| Purchase Orders | 5 | List with status filters, detail with line items, edit, create, receive items |
| Suppliers | 3 | Directory, detail with order history, create |
| Warehouses | 2 | Warehouse list, detail with stock levels |
| Stock | 4 | Overview, adjustments list, new adjustment, transfers list, new transfer |
| Reports | 4 | Overview, stock value, supplier performance, inventory turnover |
| Settings | 2 | General, team management |
| Activity | 1 | Activity log |
| Notifications | 1 | Notification center |
| Auth | 3 | Login, register, forgot password |
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 v4 | Component primitives |
| Recharts 3 | Dashboard and reporting charts |
| date-fns | Date formatting and utilities |
| Lucide React | Icon library |
| next-themes | Dark mode support |
Next Steps
- Installation -- detailed setup and configuration
- Project Structure -- understand the directory layout
- Design Tokens -- oklch color system and theming
- Accessibility -- WCAG AA compliance and keyboard support