Customization

Site identity

All site-level metadata is in site.config.ts at the project root. Edit the three fields there — name, description, url — and everything else (page titles, <meta> tags, sitemap) updates automatically.

Styling

Styles are written in Tailwind CSS v4. Theme tokens are defined as CSS custom properties in src/app/globals.css under @theme. Edit that file to change colors, spacing, or any other design token.

Dark mode is handled by the .dark class via next-themes. Colors are defined as light/dark pairs using CSS light-dark():

@theme {
  --color-background: light-dark(#ffffff, #0a0a0a);
  --color-foreground: light-dark(#171717, #ededed);
}

Fonts

Fonts are platform-native — no web font downloads. They are set as CSS variables in globals.css:

--font-sans: 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

Change these variables to use any font stack you prefer. To load a web font, add it in src/app/layout.tsx using next/font.

Prose styles

MDX content is wrapped in a .prose class. The prose styles are defined entirely in globals.css — there is no @tailwindcss/typography dependency. Edit the .prose block directly to change heading sizes, line height, link colors, or any other prose-specific style.

Syntax highlighting themes

Shiki themes are configured in src/lib/mdx-options.ts:

themes: {
  light: 'github-light',
  dark: 'github-dark',
},

Replace these with any Shiki-bundled theme.

Adding shadcn/ui components

The project is pre-configured for shadcn/ui (style: new-york, Tailwind v4). Add new primitives with:

bunx shadcn add <component>

Components are installed to src/components/ui/.