Search
Implement document search in your docs
Fumadocs UI provides a good-looking search UI for your docs, the search functionality is instead provided and documented on Fumadocs Core.
See Document Search.
Open with ⌘ K or Ctrl K.
You can customize search UI from the Root Provider component in root layout.
When not specified, it uses the Default fetch Search Client powered by Orama.
Add custom link items to search dialog.
They are shown as fallbacks when the query is empty.
To opt-out of document search, disable it from root provider.
Customise the hot keys to trigger search dialog.
Add UI to change filters.
Make sure to configure Tag Filter on search server first.
Pass options to the search client, like changing the API endpoint for Orama search server:
You can replace the default Search Dialog with:
To pass it to the Root Provider, you need a wrapper with use client directive.
Use it instead of your previous Root Provider
While generally we recommend building your own search with their client-side
SDK, you can also plug the built-in dialog interface.
Note
The built-in implementation doesn't use instant search (their official
javascript client).
Same as default search client, you can configure Tag Filter on the dialog.
A list of integrations maintained by community.
If you want to use the built-in search dialog UI instead of building your own,
you may use the SearchDialog component.
Unstable
It is an internal API, might break during iterations
Newsletter
Join the community
Subscribe to our newsletter for the latest news and updates
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
links: [
['Home', '/'],
['Docs', '/docs'],
],
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
enabled: false,
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // key code, or a function determining whether the key is pressed
},
],
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
options: {
defaultTag: 'value',
tags: [
{
name: 'Tag Name',
value: 'value',
},
],
},
}}
>
{children}
</RootProvider>;
from
'fumadocs-ui/root-provider'
;
<RootProvider
search={{
options: {
api: '/api/search/docs',
},
}}
>
{children}
</RootProvider>;
;
import SearchDialog from 'fumadocs-ui/components/dialog/search-default';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
export default function CustomDialog(props: SharedProps) {
// your own logic here
return <SearchDialog {...props} />;
}
import { RootProvider } from 'fumadocs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';
const SearchDialog = dynamic(() => import('@/components/search')); // lazy load
export function Provider({ children }: { children: ReactNode }) {
return (
<RootProvider
search={{
SearchDialog,
}}
>
{children}
</RootProvider>
);
}
from
'./provider'
;
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
;
import algo from 'algoliasearch/lite';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia';
const client = algo('appId', 'apiKey');
const index = client.initIndex('indexName');
export default function CustomSearchDialog(props: SharedProps) {
return <SearchDialog index={index} {...props} />;
}
from
'fumadocs-ui/components/dialog/search-algolia'
;
<SearchDialog
defaultTag="value"
tags={[
{
name: 'Tag Name',
value: 'value',
},
]}
/>;
;
import { OramaClient } from '@oramacloud/client';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import SearchDialog from 'fumadocs-ui/components/dialog/search-orama';
const client = new OramaClient({
endpoint: 'endpoint',
api_key: 'apiKey',
});
export default function CustomSearchDialog(props: SharedProps) {
return <SearchDialog {...props} client={client} showOrama />;
}
SearchDialog,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
export default function CustomSearchDialog(props: SharedProps) {
return <SearchDialog {...props} />;
}
