Search UI
The UI for document search
Overview
You can customise Search UI from <RootProvider />.
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
import type { ReactNode } from 'react';
import { SearchDialog } from '@/components/my-search-dialog';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html>
<body>
<RootProvider
search={{
enabled: false, // disable search entirely
SearchDialog, // replace search dialog
}}
>
{children}
</RootProvider>
</body>
</html>
);
}Hot Keys
Customise the hot keys to trigger search dialog, by default it's ⌘ K or Ctrl K.
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
<RootProvider
search={{
hotKey: [
{
display: 'K',
key: 'k', // key code, or a function determining whether the key is pressed
},
],
}}
>
{children}
</RootProvider>;References
A full list of options.
Prop
Type
Custom UI
Fumadocs UI also exposes a lower level <SearchDialog /> component for advanced use, you can create your own search dialog to replace the default one.
'use client';
import React from 'react';
import { } from 'fumadocs-core/search/client';
import {
,
,
,
,
,
,
,
,
,
type ,
} from 'fumadocs-ui/components/dialog/search';
import { } from 'fumadocs-ui/contexts/i18n';
export default function (: ) {
const { } = (); // (optional) for i18n
const { , , } = ({
: 'fetch',
,
});
return (
< ={} ={} ={.} {...}>
< />
<>
<>
< />
< />
< />
</>
< ={. !== 'empty' ? . : null} />
</>
<>{/* footer items */}</>
</>
);
}Highlight Matches
Search integrations can provide contentWithHighlights to highlight matches.
You can customise how highlights are rendered.
<SearchDialogList
items={query.data !== 'empty' ? query.data : null}
Item={(props) => (
<SearchDialogListItem
{...props}
renderHighlights={(highlights) => {
// ...
}}
/>
)}
/>How is this guide?
Last updated on