Customization Walkthrough

This page is a checklist, not a reference. For each item, there's a "detailed guide" link if you want to go deeper.

Do these in order

Each step builds on the previous. Skipping ahead usually works, but you may hit surprises (e.g. the theme preview looks off if you haven't replaced the logo first).

Rather not do all 10 steps by hand? Paste this in your AI assistant and it'll walk the whole list for you:

AI Prompt· Walk me through all customization

Act as my senior developer familiar with this DirectoryKit boilerplate. I want to customize it for my directory about {your niche}.

Walk through these steps one at a time, and for each step: show me what you'll change, wait for my "go", then edit the files.

Branding — update config/site.config.ts (brand name, tagline, contact emails, social links).
Features — edit config/features.config.ts. Enable only what's needed for MVP: {list features you want, or say "minimum viable"}.
Pricing — edit config/plans.config.ts. I want {free + paid tier for ${price}, or describe your pricing}.
Seed categories — replace seedCategories in config/directory.config.ts with 5-8 that fit my niche.
Theme — pick a preset from config/themes.config.ts that matches {describe your brand vibe} and set it as defaultColorTheme.
Advertising — if I want monetization via banners, update config/advertising.config.ts with my placement prices.
Email — set config/email.config.ts sender signature to match my brand.

Follow CLAUDE.md conventions strictly. Use pnpm, not npm.

1. Branding (30 min)

Change the name, logo, colors, and tagline so the site looks like yours.

Edit config/site.config.ts — name, tagline, URL, contact emails, social links
Drop new logos in public/assets/ — keep the same filenames
Pick a theme in config/themes.config.ts (default value at the bottom of the file)

Full guide: Branding · Theming

2. Feature switches (10 min)

Decide which modules you want on for launch. Everything is on by default except AI and i18n.

Open config/features.config.ts and flip anything you don't need to false:

export const featuresConfig = {
  partners: true,         // sponsor slots in sidebar
  badges: true,           // embeddable "featured on ..." badges
  backlinks: true,        // dofollow/nofollow link toggle
  socialProof: true,      // live counters, widgets
  newsletter: true,       // Resend email signup
  blog: true,             // /blog section
  webhooksExternal: true, // Discord/Slack notifications
  adBanner: true,         // top banner on every page
  bookmarks: true,        // user "save for later"
  ratings: true,          // star ratings on projects
  comments: true,         // project comments
  promotions: true,       // paid ad placements
  ai: false,              // AI description generation
  analytics: true,        // enhanced tracking (device, country, …)
  i18n: false,            // multi-language
};

Disabled features hide their UI and return 404 from their API routes.

Full guide: Features Config

3. Pricing (15 min)

Edit config/plans.config.ts. The default has two plans — free "Standard" and paid "Premium" at $15 one-time.

Change names, prices, feature lists, plan count — all driven by config. Only thing you can't invent: the Stripe priceId, which you create in Stripe and paste via env var.

Full guide: Plans Config · Payments

4. Seed categories (5 min)

Open config/directory.config.ts → seedCategories. Replace the generic categories (SaaS, Dev Tools, Design, …) with ones that fit your niche.

These seed the categories table on setup. Later, admins manage categories through /admin/categories.

Full guide: Directory Config · Categories

5. Promotion / ad pricing (optional, 10 min)

If monetizing via paid placements (banner, catalog cards, detail-page cards), edit config/advertising.config.ts. Set pricePerMonth for each placement and create the matching Stripe Price IDs.

Full guide: Advertising Config · Promotions & Sponsors

6. Email sender & signature (5 min)

Edit config/email.config.ts to set the from name and reply-to address. Verify a domain in Resend so emails don't land in spam.

Full guide: Email Config · Email & Notifications

7. Analytics (optional, 5 min)

Add any of these env vars — the corresponding tracker auto-activates:

NEXT_PUBLIC_GA_MEASUREMENT_ID — Google Analytics 4
NEXT_PUBLIC_POSTHOG_KEY + NEXT_PUBLIC_POSTHOG_HOST — PostHog

Full guide: Analytics Config · Analytics

supabase/schema.sql — edit in Supabase first, then mirror back, not the other way around.
lib/supabase/database-supabase.ts — the query layer. Very battle-tested, easy to break.
Anything in components/ui/ — shadcn/ui primitives. If you need tweaks, re-run the shadcn generator or fork the file.
middleware.ts — the auth / i18n middleware. Changes here tend to break login in subtle ways.

1. Branding (30 min)

2. Feature switches (10 min)

3. Pricing (15 min)

4. Seed categories (5 min)

5. Promotion / ad pricing (optional, 10 min)

6. Email sender & signature (5 min)

7. Analytics (optional, 5 min)

8. (Optional) AI description generator

9. (Optional) Multiple languages

10. Deploy and iterate

What you probably shouldn't change