Documentation
How these docs are built and how to add a page.
The docs follow the same setup as hogwarts, which mirrors ui.shadcn.com/docs: MDX content compiled by fumadocs-mdx, code highlighted at build time by rehype-pretty-code, and a sidebar, table of contents and "Copy Page" menu.
Add a page
Write the English page
Create content/docs-en/<slug>.mdx with a title and description in the frontmatter.
---
title: Example
description: One sentence about the page.
---
## First sectionWrite the Arabic page
Create content/docs-ar/<slug>.mdx with the same slug.
Add it to the sidebar
Add the slug to both meta.json files. A "---Label---" entry starts a labelled group.
Add it to the phone menu
Add the link to src/components/docs/docs-config.ts and its label to docs.sidebar in both dictionaries.
Components
| Component | Use |
|---|---|
<Callout> | A highlighted note |
<CardGrid> <DocCard> | Linked cards |
<Steps> | Numbered steps from ### headings |
<Tabs> | Tabbed content |
<Accordion> | Collapsible sections |
Files
| File | Role |
|---|---|
source.config.ts | Collections and the MDX pipeline |
src/lib/source.ts | One fumadocs loader per language |
src/mdx-components.tsx | Typography and docs components |
src/app/[lang]/(site)/docs/ | Layout and page routes |
src/components/docs/ | Sidebar, TOC, copy page, callouts |