Overview

A customizable MDX docs framework for Next.js.

PzzaDocs turns a folder of MDX files into a complete documentation site inside your existing Next.js app. You install one package, add four route files, and get a sticky header with navigation tabs, a collapsible sidebar, a table of contents, breadcrumbs, prev/next pagination, command-palette search, and light/dark theming out of the box.

Everything is styled with plain CSS custom properties prefixed --pd-, so you can restyle the whole site from your own globals.css without touching the package or adopting a utility framework.

How it works#

Content lives in your repo. Pages are .mdx (or .md) files under content/docs. Folder order, labels, and section separators come from a small meta.json per folder.
Rendering happens on the server. createSource reads your content, compiles MDX at request time with full React Server Component support, highlights code with dual light/dark themes, and caches the result per process.
The UI is a set of composable components. DocsLayout and DocsPage from pzzadocs/ui assemble the shell, while pzzadocs/mdx ships the Callout, Tabs, Steps, Cards, Accordion, and code block components that are available in every page without imports.

Explore the docs#

Getting Started

Install the package, add the route files, and publish your first page.

Configuration

Set the site title, navigation tabs, GitHub link, search, and default theme.

Writing Content

Frontmatter fields, meta.json ordering, section labels, and folder index pages.

Components

Callouts, tabs, steps, cards, code blocks, and accordions ready to use in MDX.

Theming

Override the --pd-* design tokens and swap the sans and mono fonts.

Deployment

Static generation, the search index route, and what to expect in production.

More#

Search

Structured client-side search with page, heading, and text records.

LLM outputs

llms.txt, llms-full.txt, and per-page Markdown with a copy menu on every page.

Sidebar

Root folders, versioning, open state, prefetching, and icons.

Localization

Translated content, locale prefixes in URLs, locale-aware routes, and translated UI strings.

Code blocks

Tabs, line numbers, diffs, focus, word highlights, and package-install fences.

Requirements#

Requirement	Version
Next.js	16 (App Router)
React	19
Node.js	24 or newer
TypeScript	5.9 (recommended, not required)

Server Components only

createSource reads the filesystem and compiles MDX, so it must run on the server. Keep lib/source.ts out of client components and import it only from route files, layouts, and route handlers.