Configuration

Learn how to customize Project Distri to fit your needs.

Site Metadata

Update the site title, description, and other metadata in app/layout.tsx:

export const metadata = {
  title: 'Your Project Name',
  description: 'Your project description',
};

Navigation

Edit the navigation items in components/header.tsx:

const navItems = [
  { title: 'Home', href: '/' },
  { title: 'Docs', href: '/docs' },
  { title: 'Blog', href: '/blog' },
  { title: 'Pricing', href: '/#pricing' },
];

Theming

The design system uses CSS custom properties defined in app/globals.css. You can customize:

• Colors — Update the :root and [data-theme="dark"] sections
• Typography — Change --font-sans and --font-mono
• Spacing — Modify --space-* variables
• Border radius — Adjust --radius-* variables

Adding New Doc Pages

1. Create a new .mdx file in content/docs/:

touch content/docs/my-new-page.mdx

2. Add frontmatter at the top:

---
title: My New Page
description: Description of the page
order: 4
section: Guides
---

3. Write your content in MDX below the frontmatter.

Adding Blog Posts

1. Create a new .mdx file in content/blog/:
2. Add the required frontmatter (title, date, author, excerpt)
3. The post will automatically appear on the /blog page