API Reference
Complete API reference for all available functions and components
API Reference
Comprehensive reference for all available APIs.
Core Functions
source.getPage()
Get a page by its slug.
const page = source.getPage(['getting-started']);Parameters:
slug(string[]): Array of path segments
Returns: Page object or undefined
source.getPages()
Get all pages from the source.
const allPages = source.getPages();Returns: Array of page objects
This function is useful for generating sitemaps or navigation structures.
source.generateParams()
Generate params for static page generation.
export async function generateStaticParams() {
return source.generateParams();
}Returns: Array of param objects for Next.js
Component Props
DocsPage
Main documentation page wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
toc | TOC[] | - | Table of contents |
full | boolean | false | Enable full-width layout |
children | ReactNode | - | Page content |
Example:
<DocsPage toc={page.data.toc} full={false}>
<DocsTitle>{page.data.title}</DocsTitle>
<DocsBody>
<MDX />
</DocsBody>
</DocsPage>Card
Card component for link grids.
| Prop | Type | Description |
|---|---|---|
title | string | Card title |
href | string | Link URL |
description | string | Card description (optional) |
icon | ReactNode | Icon component (optional) |
Example:
<Card
title="Documentation"
href="/docs"
description="Browse the docs"
/>Callout
Alert/callout component for important information.
| Prop | Type | Description |
|---|---|---|
type | 'info' | 'warning' | 'error' | 'check' | Callout type |
title | string | Optional title |
children | ReactNode | Callout content |
<Callout type="info">
Informational message here.
</Callout><Callout type="warning">
Warning message here.
</Callout><Callout type="error">
Error message here.
</Callout><Callout type="check">
Success message here.
</Callout>Hooks
useTreeContext()
Access the page tree context.
import { useTreeContext } from 'fumadocs-core/provider';
function MyComponent() {
const tree = useTreeContext();
// Use tree data
}Returns: Page tree object
useDocsSearch()
Hook for document search functionality.
import { useDocsSearch } from 'fumadocs-ui/hooks';
function SearchComponent() {
const { search, results } = useDocsSearch();
// Implement search UI
}Returns: Object with search function and results
Utilities
createRelativeLink()
Create relative links between pages.
import { createRelativeLink } from 'fumadocs-ui/mdx';
const Link = createRelativeLink(source, page);This automatically handles relative path resolution for internal links.
Type Definitions
interface Page {
url: string;
slugs: string[];
data: {
title: string;
description?: string;
icon?: string;
full?: boolean;
toc: TOC[];
body: MDXContent;
};
}
interface TOC {
title: string;
url: string;
depth: number;
}