Customization

Last updated on 2026-04-05

The Inventory Management Kit is designed to be customized for your warehouse, retail, or logistics business. All components use design tokens and Tailwind CSS utilities, making brand adaptation straightforward.

Changing Colors

Update CSS custom properties in app/globals.css. The default inventory theme uses oklch hue 160 (emerald/teal). Change the hue to rebrand the entire kit:

:root {
  /* Change from emerald (hue 160) to indigo (hue 270) */
  --primary: oklch(0.45 0.18 270);
  --primary-foreground: oklch(0.98 0 0);
  --accent: oklch(0.94 0.02 270);
  --accent-foreground: oklch(0.35 0.15 270);
  --ring: oklch(0.55 0.16 270);
}

.dark {
  --primary: oklch(0.7 0.16 270);
  --primary-foreground: oklch(0.15 0.02 270);
}

All 32 screens automatically inherit the new colors -- buttons, badges, links, charts, sidebar accents, status indicators, and focus rings all update at once.

Changing Typography

Configure fonts in app/layout.tsx:

import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" });
const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains" });

Swap these for any Google Font or local font files. The CSS variables --font-sans, --font-heading, and --font-mono control body text, headings, and code respectively.

Replacing Seed Data

All mock data lives in data/seed.ts. Replace it with your data source:

API calls

import { getProducts } from "@/lib/api"

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductsTable products={products} />
}

Database (Prisma, Drizzle)

import { db } from "@/lib/db"

const products = await db.product.findMany({
  orderBy: { updatedAt: "desc" },
  include: { category: true, stockLevels: true },
})

ERP Integration

import { erpClient } from "@/lib/erp"

const inventory = await erpClient.getInventory({
  warehouseId: "wh-001",
  includeStockLevels: true,
})

Adding Products and Warehouses

Adding Products to Seed Data

Add entries to the products array in data/seed.ts:

{
  id: "prod-new",
  name: "Industrial Pump Motor",
  sku: "IPM-2024-001",
  description: "Heavy-duty pump motor for industrial applications",
  categoryId: "cat-machinery",
  unitPrice: 1250.00,
  costPrice: 875.00,
  reorderPoint: 5,
  imageUrl: "/images/products/pump-motor.jpg",
}

Add corresponding stock levels for each warehouse:

{
  productId: "prod-new",
  warehouseId: "wh-001",
  quantity: 24,
  reorderPoint: 5,
}

Adding Warehouses

Add entries to the warehouses array:

{
  id: "wh-new",
  name: "East Coast Distribution Center",
  address: "500 Harbor Road, Newark, NJ 07102",
  contactPerson: "Mike Chen",
  phone: "+1 (973) 555-0199",
  email: "mike@warehouse.com",
  status: "active",
  capacity: 50000,
}

Modifying Forms

Adding Fields to Product Form

Edit components/inventory/product-form.tsx to add custom fields:

<div className="space-y-2">
  <Label htmlFor="customField">Custom Field</Label>
  <Input
    id="customField"
    value={form.customField}
    onChange={(e) => setForm({ ...form, customField: e.target.value })}
  />
</div>

Update the corresponding type in types/index.ts:

interface Product {
  // existing fields...
  customField?: string
}

Adding Fields to Purchase Order Form

The PO line item editor supports adding custom columns:

// Add a "notes" column to line items
<LineItemEditor
  lineItems={lineItems}
  columns={["product", "quantity", "unitCost", "notes", "total"]}
  onChange={setLineItems}
/>

Connecting a Real Inventory API

REST API

// app/api/inventory/products/route.ts
export async function GET() {
  const res = await fetch(`${process.env.INVENTORY_API_URL}/products`, {
    headers: { Authorization: `Bearer ${process.env.INVENTORY_API_KEY}` },
  })
  const data = await res.json()
  return Response.json(data)
}

Supabase

import { createClient } from "@supabase/supabase-js"

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

const { data: products } = await supabase
  .from("products")
  .select("*, category:categories(*), stock_levels(*)")
  .order("created_at", { ascending: false })

Shopify Inventory API

// app/api/shopify/inventory/route.ts
export async function GET() {
  const res = await fetch(
    `https://${process.env.SHOPIFY_STORE}.myshopify.com/admin/api/2024-01/inventory_levels.json`,
    {
      headers: {
        "X-Shopify-Access-Token": process.env.SHOPIFY_ACCESS_TOKEN!,
      },
    }
  )
  const data = await res.json()
  return Response.json(data.inventory_levels)
}

Custom Reports

Adding a New Report

Create a new route at app/(dashboard)/reports/your-report/page.tsx
Add a chart component in components/charts/
Add a report card to the reports overview page

// app/(dashboard)/reports/abc-analysis/page.tsx
export default function ABCAnalysisPage() {
  return (
    <div className="space-y-6">
      <h1 className="font-heading text-2xl font-bold">ABC Analysis</h1>
      <ABCChart products={products} />
      <ABCTable products={products} />
    </div>
  )
}

Modifying Existing Charts

All charts use Recharts. Customize colors, axes, and tooltips:

import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts"

<BarChart data={stockData}>
  <XAxis dataKey="warehouse" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="var(--chart-1)" />
  <Bar dataKey="quantity" fill="var(--chart-2)" />
</BarChart>

Extending Components

Use the cn() utility (from lib/utils.ts) to add custom classes without conflicts:

import { Button } from "@/components/ui/button"

<Button className="rounded-full shadow-lg" size="lg">
  Create Purchase Order
</Button>

Edit components/layout/app-sidebar.tsx to add or remove navigation items:

const navItems = [
  { label: "Dashboard", href: "/", icon: LayoutDashboard },
  { label: "Products", href: "/products", icon: Package },
  { label: "Purchase Orders", href: "/purchase-orders", icon: ClipboardList },
  { label: "Suppliers", href: "/suppliers", icon: Truck },
  { label: "Warehouses", href: "/warehouses", icon: Warehouse },
  { label: "Stock", href: "/stock", icon: BarChart3 },
  { label: "Reports", href: "/reports", icon: FileBarChart },
  // Remove items you don't need
  // Add items for new inventory pages
]

Each item takes a label, href, and a Lucide icon component. Active state highlighting is handled automatically based on the current pathname.

Removing Unused Features

Delete directories you don't need:

Don't need reports? Delete app/(dashboard)/reports/ and the related chart components
Don't need stock transfers? Delete app/(dashboard)/stock/transfers/ and components/inventory/transfer-*
Don't need suppliers? Delete app/(dashboard)/suppliers/ and components/inventory/supplier-*
Run pnpm build to verify no broken imports

Using shadcn/ui CLI

Add new components alongside the kit:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens. The kit uses the new-york style with CSS variables enabled.

Accessibility

FAQ