I18nProvider
Provides internationalization context for Fumadocs UI.
import { I18nProvider } from 'fumadocs-ui/contexts/i18n';
Props
Current locale code (e.g., 'en', 'fr')
Available language optionsinterface LocaleItem {
name: string; // Display name
locale: string; // Locale code
}
Custom translations for UI stringsAvailable keys:
search - “Search”searchNoResult - “No results found”toc - “On this page”tocNoHeadings - “No Headings”lastUpdate - “Last updated on”chooseLanguage - “Choose a language”nextPage - “Next Page”previousPage - “Previous Page”chooseTheme - “Theme”editOnGithub - “Edit on GitHub”
Custom locale change handler (default: automatic URL-based navigation)
Usage
import { I18nProvider } from 'fumadocs-ui/contexts/i18n';
export default function RootLayout({ children }) {
return (
<I18nProvider
locale="en"
locales={[
{ name: 'English', locale: 'en' },
{ name: 'Français', locale: 'fr' },
{ name: '日本語', locale: 'ja' }
]}
translations={{
search: 'Search documentation',
toc: 'Table of Contents'
}}
>
{children}
</I18nProvider>
);
}
useI18n
Access internationalization context.
import { useI18n } from 'fumadocs-ui/contexts/i18n';
Returns
onChange
(locale: string) => void | undefined
Locale change handler
Usage
function MyComponent() {
const { text, locale, onChange } = useI18n();
return (
<div>
<p>{text.search}</p>
<button onClick={() => onChange?.('fr')}>
Switch to French
</button>
</div>
);
}
I18nLabel
Render a translated label.
import { I18nLabel } from 'fumadocs-ui/contexts/i18n';
Props
label
keyof Translations
required
Translation key to display
Usage
<I18nLabel label="toc" />
// Renders: "On this page" (or translated equivalent)
SearchProvider
Provides search dialog functionality with keyboard shortcuts.
import { SearchProvider } from 'fumadocs-ui/contexts/search';
Props
SearchDialog
ComponentType<SharedProps>
required
Search dialog component receiving open and onOpenChange props
Custom links displayed when search is emptytype SearchLink = [name: string, href: string];
Keyboard shortcuts for opening search (default: Cmd/Ctrl + K)interface HotKey {
display: ReactNode;
key: string | ((e: KeyboardEvent) => boolean);
}
Preload search dialog before opening (default: true)
Additional props passed to SearchDialog
Usage
import { SearchProvider } from 'fumadocs-ui/contexts/search';
import dynamic from 'next/dynamic';
const SearchDialog = dynamic(() => import('@/components/search'));
export default function RootLayout({ children }) {
return (
<SearchProvider
SearchDialog={SearchDialog}
links={[
['Getting Started', '/docs'],
['API Reference', '/docs/api']
]}
>
{children}
</SearchProvider>
);
}
useSearchContext
Access search context.
import { useSearchContext } from 'fumadocs-ui/contexts/search';
Returns
Whether search is enabled
Current search dialog open state
Configured keyboard shortcuts
Function to control search dialog state
Usage
function SearchButton() {
const { setOpenSearch, hotKey } = useSearchContext();
return (
<button onClick={() => setOpenSearch(true)}>
Search {hotKey.map(k => k.display).join(' ')}
</button>
);
}
SearchOnly
Conditionally render children only when search is enabled.
import { SearchOnly } from 'fumadocs-ui/contexts/search';
Usage
<SearchOnly>
<SearchButton />
</SearchOnly>
TreeContextProvider
Provides page tree context for navigation.
import { TreeContextProvider } from 'fumadocs-ui/contexts/tree';
Props
Page tree structure from fumadocs-core
Usage
import { TreeContextProvider } from 'fumadocs-ui/contexts/tree';
import { pageTree } from '@/lib/source';
export default function Layout({ children }) {
return (
<TreeContextProvider tree={pageTree}>
{children}
</TreeContextProvider>
);
}
useTreeContext
Access page tree context.
import { useTreeContext } from 'fumadocs-ui/contexts/tree';
Returns
root
PageTree.Root | PageTree.Folder
Current root node in the tree (may be a folder if using nested roots)
Usage
function NavigationTree() {
const { root } = useTreeContext();
return (
<nav>
{root.children.map(node => (
<NavItem key={node.url} node={node} />
))}
</nav>
);
}
useTreePath
Get the current page’s path in the tree.
import { useTreePath } from 'fumadocs-ui/contexts/tree';
Returns
PageTree.Node[] - Array of nodes from root to current page
Usage
function Breadcrumb() {
const path = useTreePath();
return (
<nav>
{path.map((node, i) => (
<span key={i}>
{node.type === 'page' && node.name}
{i < path.length - 1 && ' / '}
</span>
))}
</nav>
);
}
Context Architecture
Fumadocs UI contexts work together to provide a complete documentation experience:
import { I18nProvider } from 'fumadocs-ui/contexts/i18n';
import { SearchProvider } from 'fumadocs-ui/contexts/search';
import { TreeContextProvider } from 'fumadocs-ui/contexts/tree';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { pageTree } from '@/lib/source';
export default function RootLayout({ children }) {
return (
<I18nProvider
locale="en"
locales={[
{ name: 'English', locale: 'en' },
{ name: 'Spanish', locale: 'es' }
]}
>
<SearchProvider SearchDialog={SearchDialog}>
<DocsLayout tree={pageTree}>
{/* TreeContextProvider is included in DocsLayout */}
{children}
</DocsLayout>
</SearchProvider>
</I18nProvider>
);
}