Introduction
What is DirectoryKit and what you can build with it.
What is DirectoryKit?
DirectoryKit is a production-ready Next.js boilerplate for building directory websites, marketplaces, and catalogs. It comes with everything you need to launch a fully functional directory — submissions, voting, payments, authentication, admin panel, and more.
Built on a modern stack: Next.js 16, Supabase, Stripe, Tailwind CSS, and shadcn/ui.
Time to launch
Most developers go from zero to deployed in under 2 hours.
What can you build?
DirectoryKit is perfect for:
- SaaS directories — curated lists of tools and services
- AI tool catalogs — showcase AI products with categories and ratings
- Job boards — listing platforms with submissions and filtering
- Startup launchpads — Product Hunt-style voting and discovery
- Resource directories — curated links, templates, or assets
- Local business directories — location-based listings
Key features
| Feature | Description |
|---|---|
| Project submissions | Multi-step form with plan selection, media upload, and validation |
| Admin panel | Approve/reject submissions, manage categories, users, and content |
| Payments | Stripe integration with free and paid submission tiers |
| Authentication | Email/password + Google OAuth via Supabase Auth |
| Categories & Spheres | Hierarchical categorization with drag-and-drop ordering |
| Ratings & Comments | User engagement features with moderation |
| Analytics | Built-in tracking with GA and PostHog integration |
| Promotions & Sponsors | Monetization through promoted listings and sponsorships |
| Newsletter | Email collection with Resend integration |
| Blog | SEO-optimized blog powered by SEObot |
| 14 Color themes | Instant brand customization with HSL-based theming |
| Dark/Light mode | Full dark mode support out of the box |
| i18n-ready | Multi-language support via next-intl (disabled by default) |
| AI features | AI-powered descriptions and category suggestions |
Tech stack
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Database: Supabase (PostgreSQL + Auth + Storage)
- Payments: Stripe
- Email: Resend
- Styling: Tailwind CSS + shadcn/ui
- Animations: GSAP
- Package manager: pnpm
Architecture overview
DirectoryKit follows a configuration-driven design. All customization lives in config files — to rebrand or toggle features, you edit config files without touching business logic.
config/ # All customization here
site.config.ts # Brand name, URLs, social links
features.config.ts # Feature flags (toggle UI + API)
plans.config.ts # Pricing tiers and Stripe IDs
themes.config.ts # 14 color themes with HSL values
...
lib/ # Business logic
app/ # Next.js routes
components/ # React components
types/ # TypeScript types (derived from Zod schemas)
Next steps
Ready to get started? Head to the Requirements page to check what you need, then follow the Installation guide.