Get Started
A complete showcase of all Fumadocs components and features.
Callouts
Default callout — used for general information.
Info
This is an info callout with a title.
Warning
Check this before continuing.
Error
Something went wrong here.
Success
Operation completed successfully.
[!NOTE] Admonition via
> [!NOTE]syntax — enabled byremarkAdmonition.
Cards
Next.js docs
The React framework for the web.
Fumadocs docs
The documentation framework.
Tailwind CSS
A utility-first CSS framework.
Steps
Install dependencies
npm installConfigure your source
Update source.config.ts with your content directories.
Run the dev server
npm run devTabs
npm install fumadocs-uipnpm add fumadocs-uiyarn add fumadocs-uibun add fumadocs-uiCode Blocks
Syntax highlighting with title, line highlights, and word highlights:
import { loader } from 'fumadocs-core/source';
import { docs } from 'collections/server';
export const source = loader({
baseUrl: '/docs',
source: docs.toFumadocsSource(),
});npm Install Block
npm install fumadocs-ui fumadocs-core fumadocs-mdxTypeTable
Prop
Type
Accordion
File Tree
index.mdx
meta.json
source.config.ts
What Lives Here
- Guides and how-tos for your product or library.
- Reference material for features and APIs.
- Examples that show expected usage and behavior.
Next Steps
Start by expanding this page with your project's overview, then add your first real guide.