Categories
How projects are grouped — two levels (spheres → categories).
DirectoryKit uses a two-level hierarchy:
- Spheres — broad buckets (e.g. "Software", "Business", "Creative")
- Categories — specific topics inside a sphere (e.g. "SaaS", "Developer Tools", "UI Kits")
Every project belongs to one or more categories. Spheres come along for the ride (they're inferred from the category).
Seeding on first install
The first time the app runs against an empty categories table, it inserts the list from config/directory.config.ts → seedCategories. Edit that list before your first deploy so your directory starts with sensible categories.
After that, manage everything through the admin panel.
Admin view
Powered by @dnd-kit/*. Drag to reorder, drag between spheres to re-home a category. CSV import also supported for bulk.
Frontend components
| Component | Where it's used |
|---|---|
CategorySelector | Dropdown filter on listing pages |
CategoryBadge | Label on project cards |
/categories | Full listing of all spheres + categories |
/categories/[slug] | Single-category page with all projects in it |
Database shape
The categories table columns you care about:
| Column | Meaning |
|---|---|
name | Display name |
slug | URL-friendly ID (used in /categories/[slug]) |
sphere | Which sphere this category belongs to |
icon | Optional Lucide icon name |
color | Optional brand color for the badge |
sort_order | Controls display order |
Projects (apps table) store their categories as a JSONB array of slugs in categories. This lets a single project appear in multiple categories without a join table.
How "Sphere" pages work
There isn't a separate sphere page by default — /categories groups categories under their sphere header. If you want dedicated sphere landing pages, add a route under app/(marketing)/spheres/[slug]/page.tsx that queries categories by sphere.