Documentation | PaceUI

Starter already includes this document content, which you can replace with your own.

Content Structure

Fumadocs organizes your documentation using a simple file structure based on Markdown (.mdx) files.

1. Content Location

All your documentation content belongs inside root directory at /content.

2. Just Use It: Creating Your First Page

To create new a page, just add a .mdx file in your content directory.
The meta.json file controls the navigation sidebar order and titles.

The meta.json file in content directory is a simple JSON array that explicitly orders the files and folders within that section.

File	Structure	Result
`meta.json`	`{"pages": ["index","setup","get-started"]}`	Sidebar shows "Introduction", "Setup" and then "Get Started".

File/Folder	Purpose
`/content/docs/get-started.mdx`	Creates the "Get started" page. at `/docs/get-started`
`/content/docs/setup.mdx`	Creates the "Setup" page. at `/docs/setup`
`/content/docs/meta.json`	Defines the main section order for the entire sidebar.

3. Frontmatter

Every .mdx file should start with a Frontmatter block to define metadata.

---
title: Your Page Title
description: A brief summary of this page
---

title: Appears as the page title and in the sidebar.
description: Used for SEO metadata and shows up under title in the page.

You only have to write simple .md content (I know you'll use AI for that), and it'll look beautiful by default.

Improvements and Advanced Usage

Versioning

getting-started.mdx

Customization & Extension

You can make it fancier or extend features with rehype, mermaid, twoslash and a few other plugins

1. Customizing theme

src/styles/docs.css

@import "fumadocs-ui/css/neutral.css";
/* or */
@import "fumadocs-ui/css/shadcn.css";

2. Documentation Components (Rich Content)

Fumadocs provides powerful, reusable React components to make your documentation more engaging than plain Markdown. You can add them as per your requirements such as

src/routes/docs/$.tsx

import { Folder } from "fumadocs-ui/components/files";

<MDX
    components={{
        ...defaultMdxComponents,
        Folder, // keep adding more as per requirements
    }}
/>;

Options for components

Component	Purpose
`<Callout>`	Highlight important notes, warnings, or tips.
`<Card>`	Create visually appealing link cards or feature blocks.
`<Accordion>`	Add Accordions to your documentation
`<AutoTypeTable>`	Auto-generated type table
`<Banner>`	Add a banner to your site
`<CodeBlock>`	Displaying Shiki highlighted code blocks
`<DynamicCodeBlock>`	A codeblock that also highlights code
`<Files>`	Display file structure in your documentation
`<GitHubInfo>`	Display your GitHub repository information
`<GraphView>`	A graph of all pages.
`<ImageZoom>`	Allow zoom-in images in your documentation
`<InlineTOC>`	Add Inline TOC into your documentation
`<Steps>`	Adding steps to your docs
`<Tabs>`	A Tabs component built with Radix UI, with additional features such as persistent and shared value.
`<TypeTable>`	A table for documenting types

3. Customizing layout

Furthermore you can customize the the root layout at below illustrated file, few Required modifications are already made, you can customize them even more here

src/routes/docs.tsx

<DocsLayout
    // ... other props
    sidebar={{
        components: {
            Item: SidebarItem, // these are custom made components used for modifications
        },
    }}>
    <Outlet /> {/* your docs page renders here */}
</DocsLayout>