Hello World
Your first document
Welcome to the docs! You can start writing documents in /content/docs.
What is Next?
Build better docsbetter docsbetter docs,
in seconds.
Runs on Next.js · React Router · TanStack Start · Waku · Astro
Fumadocs is a React documentation framework for developers, beautifully designed by Fuma Nama.
- Brings powerful features for your docs workflows.
- High customizability to fit your preferences.
- Works seamlessly with any React framework, Astro, CMS, anything.
Express more in fewer words,
with the Markdown you already know.
quick-start.mdx
---
title: Quick Start
description: Create your first docs site.
---
Quick Start
Create your first docs site.
## Installation
```npm
npm i fumadocs-ui fumadocs-core
```
Installation
npm i fumadocs-ui fumadocs-core```ts twoslash title="page.tsx"
import { source } from '@/lib/source';
// @noErrors
source.getP;
// ^|
```
import { } from '@/lib/source';
.getP- getPageTree
- getPageByHref
- getPages
- getPage
- getPageByUrl
;
<Mermaid
chart="
graph LR
MDX --> Fumadocs
Fumadocs --> Page
Fumadocs --> Search
"
/>
Always up to date. Generate content from your code,
the single source of truth.
button.tsx
export interface ButtonProps {
/** The text inside the button. */
label: string;
/** Renders a link instead. */
href?: string;
/** @deprecated Use `className`. */
color?: string;
/** Called when it is pressed. */
onPress?: () => void;
}button.tsx
releases
Unreleased
Deprecates color, use className.
1.2.0
Adds href, to render a link.
2.0.0
Deprecates color, use className.
1.2.0
Adds href, to render a link.
ButtonProps
Prop
Type
Prop
Type
llms.txt
# Button
A button, or a link with href.
## Props
- label: string: The text inside the button.
- href?: string: Renders a link instead.
- color?: string:
- onPress?: function: Called when it is pressed.# Button A button, or a link with href. ## Props - label: string: The text inside the button. - href?: string: Renders a link instead. - color?: string, deprecated: Use className. - onPress?: function: Called when it is pressed.
button.mdx
Button
A button, or a link with href.
export interface ButtonProps {
/** The text inside the button. */
label: string;
/** Renders a link instead. */
href?: string;
color?: string;
/** Called when it is pressed. */
onPress?: () => void;
}Button
A button, or a link with href.
export interface ButtonProps {
/** The text inside the button. */
label: string;
/** Renders a link instead. */
href?: string;
/** @deprecated Use `className`. */
color?: string;
/** Called when it is pressed. */
onPress?: () => void;
}og.png
FumadocsButtonA button, or a link with href.v1.2.0
FumadocsButtonA button, or a link with href.v2.0.0
Designed to be composable,
separated as layers.
UIFumadocs UI
CoreFumadocs Core
ContentFumadocs MDX
FrameworkNext.js
serving /docs
_
- On this page
- Usage
- Options
Your stack
UILayouts and components
CoreSearch, page tree, TOC and i18nfixed
ContentWhere your pages come from
FrameworkWhat your docs run on
Extend your docs with integrations,
effortlessly.
install
$npx @fumadocs/cli feature searchnpm i fumadocs-openapi shikinpx @fumadocs/cli feature ainpx @fumadocs/cli feature llmsnpx @fumadocs/cli init --i18nnpx @fumadocs/cli feature ognpx @fumadocs/cli feature search
⌘K
ZBSearch built in, or Algolia and more.
ESCttwtwotwostwosltwoslatwoslastwoslashTwoslashTwoslashUsageTwoslashUsageCacheTwoslashUsageCacheTwoslashUsageCachereadytyping3 resultszbsearch
API pages and a playground from your spec.
SendGET/planetsSend200readysendingrespondedopenapi 3.1
Ask AI, answered from your docs.
SearchingSearchingSearchingSearchingSearchingSearchingSearched3 resultsreadysearchingansweringansweredsearch tool
Every page as Markdown for AI agents.
/docs/markdown/twoslash.md###```ts```readyreadingservedtext/markdown
Localized routes, page trees and UI text.
enenzh-cnenenzh-cnenzh-cnzh-cnzh-cnzh-twzh-cnzh-cnzh-twzh-cnzh-twzh-twzh-twenzh-twzh-twenzh-twenOn this pageOn this page本页目录On this pageOn this page本页目录On this page本页目录本页目录本页目录本頁目錄本页目录本页目录本頁目錄本页目录本頁目錄本頁目錄本頁目錄On this page本頁目錄本頁目錄On this page本頁目錄On this pageflippingenzh-cnzh-tw3 locales
Need more control? Use Fumadocs CLI to install
and own the UI as code.
$
npx @fumadocs/cli customizenpx @fumadocs/cli add banner filesfumadocs-ui16.17.9
fumadocs.dev/registry
29filesfiles
my-app
breadcrumb.tsx
container.tsx
footer.tsx
toc.tsx
index.tsx
container.tsx
header.tsx
sidebar.tsx
client.tsx
index.tsx
4filesfiles
my-app
button.tsx
collapsible.tsx
banner.tsx
files.tsx
mdx.tsx
cn.ts
layout.shared.tsx
shared.ts
source.ts
localhost:3000/docs
My App
My App
Search
Hello WorldComponents
On this page
What is Next?
My App
My App
Search
Hello WorldComponents
Hello World
Your first document
Welcome to the docs! You can start writing documents in /content/docs.
What is Next?
Learn more about Next.js
Learn more about Fumadocs
On this page
What is Next?
import { source } from '@/lib/source';-
import { DocsLayout } from 'fumadocs-ui/layouts/docs';+
import { DocsLayout } from '@/layouts/docs';import { DocsLayout } from '@/layouts/docs';import { baseOptions } from '@/lib/layout.shared';export default function Layout({ children }: LayoutProps<'/docs'>) {return (<DocsLayout tree={source.getPageTree()} {...baseOptions()}>{children}</DocsLayout>);}import { source } from '@/lib/source';import {DocsBody,DocsDescription,DocsPage,DocsTitle,MarkdownCopyButton,ViewOptionsPopover,-
} from 'fumadocs-ui/layouts/docs/page';+
} from '@/layouts/docs/page';} from '@/layouts/docs/page';import { notFound } from 'next/navigation';export function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {return (<h1 {...props} className={cn('text-[1.75em] font-semibold', className)}><h1 {...props} className={cn('text-[2.5em] font-semibold', className)}><h1 {...props} className={cn('text-[2.5em] font-semibold', className)}>{children}</h1>);}localhost:3000/docs
Hello World
My App
My App
Search
Hello WorldComponents
Hello World
Your first document
Welcome to the docs! You can start writing documents in /content/docs.
What is Next?
Learn more about Next.js
Learn more about Fumadocs
On this page
What is Next?
Hello World
My App
My App
Search
Hello WorldComponents
Hello World
Your first document
Welcome to the docs! You can start writing documents in /content/docs.
What is Next?
Learn more about Next.js
Learn more about Fumadocs
On this page
What is Next?
import { type HTMLAttributes, useEffect, useState } from 'react';import { X } from 'lucide-react';-
import { cn } from '@/utils/cn';+
import { cn } from '../lib/cn';import { cn } from '../lib/cn';-
import { buttonVariants } from '@/components/ui/button';+
import { buttonVariants } from './ui/button';import { buttonVariants } from './ui/button';import { useTranslations } from '@fuma-translate/react';variant === 'normal' && 'bg-fd-secondary',variant === 'normal' && 'bg-fd-primary text-fd-primary-foreground',variant === 'normal' && 'bg-fd-primary text-fd-primary-foreground',variant === 'rainbow' && 'bg-fd-background',!open && 'hidden',import { cva } from 'class-variance-authority';import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react';import { type HTMLAttributes, type ReactNode, useState } from 'react';-
import { cn } from '@/utils/cn';+
import { cn } from '../lib/cn';import { cn } from '../lib/cn';import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';breadcrumb.tsx
container.tsx
footer.tsx
toc.tsx
index.tsx
container.tsx
header.tsx
sidebar.tsx
client.tsx
index.tsx
client.tsx
theme-switch.tsx
search-trigger.tsx
language-select.tsx
page-actions.tsx
button.tsx
popover.tsx
collapsible.tsx
index.tsx
block.tsx
default.tsx
clerk.tsx
dropdown.tsx
base.tsx
link-item.tsx
page-tree.tsx
urls.ts
merge-refs.ts
hotkey.ts
button.tsx
collapsible.tsx
banner.tsx
files.tsx
Battle-tested,
running in production.
- GitHub starsfuma-nama/fumadocs
- 13,517
- Weekly downloadsfumadocs-core
- 3,268,949
- Contributorsfuma-nama/fumadocs
- 199
Vercel
Fumadocs powers the docs of its open source SDKs.
Loved by the best
developers & teams.
@shadcn
“You know how you end up rebuilding a full docs site every time you start a new project? Fumadocs fixes this by giving you all the right blocks that you compose together. Like headless docs to build exactly what you need.”
shadcnCreator of Shadcn UI@ssalbdivad
“I'd have no shot building @arktypeio docs that looked half this good without it 😍”
David BlassCreator of Arktype@aidenybai
“fumadocs is the best Next.js docs framework”
Aiden BaiCreator of Million.js@anthonyshew
“Major shoutout to @fuma_nama for making fumadocs, a gorgeous documentation framework that composes beautifully into the App Router.”
Anthony ShewTurbo DX at Vercelready