Search
Implement document search in your docs
Search UI
You can customise some configurations from root provider.
For example, to disable search UI:
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<RootProvider
search={{
enabled: false,
}}
>
{children}
</RootProvider>
</body>
</html>
);
}For further customisations, you can see Search Client.
Hot Keys
Customise the hot keys to trigger search dialog, by default it's ⌘ K or Ctrl K.
import { RootProvider } from 'fumadocs-ui/provider';
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // key code, or a function determining whether the key is pressed
},
],
}}
>
{children}
</RootProvider>;Search Client
You can choose & configure the search client according to your search engine, it defaults to Orama search.
Orama (default)
The default search engine powered by Orama.
Algolia
Using Algolia with Fumadocs UI.
Mixedbread
Using Mixedbread with Fumadocs UI.
Orama Cloud
Using Orama Cloud with Fumadocs UI.
Community Integrations
A list of integrations maintained by community.
Highlight Matches
Search integrations can provide contentWithHighlights to highlight matches.
After configuring search client UI according to the guides above, you can customise how it is rendered.
<SearchDialogList
items={query.data !== 'empty' ? query.data : null}
Item={(props) => (
<SearchDialogListItem
{...props}
renderHighlights={(highlights) => {
// ...
}}
/>
)}
/>How is this guide?
Last updated on