Fumadocs UI provides a good-looking search dialog out-of-the-box.
Open with ⌘ K or Ctrl K .
You can customize the search dialog from Root Provider .
When not specified, it uses the Default fetch
Search Client powered by Orama.
It is lazy loaded using next/dynamic
.
This allows a better initial loading performance.
Add custom link items to search dialog.
They are shown as fallbacks when the query is empty.
import { RootProvider } from 'fumadocs-ui/root-provider' ;
< RootProvider
search = {{
links : [
[ 'Home' , '/' ] ,
[ 'Docs' , '/docs' ] ,
] ,
}}
>
{ children }
</ RootProvider > ;
To opt-out of document search, disable it from root provider.
import { RootProvider } from 'fumadocs-ui/root-provider' ;
< RootProvider
search = {{
enabled : false ,
}}
>
{ children }
</ RootProvider > ;
Customise the hot keys to trigger search dialog.
import { 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 > ;
Configure Tag Filter on the default search client.
import { RootProvider } from 'fumadocs-ui/root-provider' ;
< RootProvider
search = {{
options : {
defaultTag : 'value' ,
tags : [
{
name : 'Tag Name' ,
value : 'value' ,
},
] ,
},
}}
>
{ children }
</ RootProvider > ;
Pass options to the search client.
For example, using static
client:
import { RootProvider } from 'fumadocs-ui/root-provider' ;
< RootProvider
search = {{
options : {
type : 'static' ,
},
}}
>
{ children }
</ RootProvider > ;
You can replace the default Search Dialog with:
'use client' ;
import SearchDialog from 'fumadocs-ui/components/dialog/search-default' ;
export default function CustomDialog ( props ) {
// your own logic here
return < SearchDialog { ... props } /> ;
}
To pass it to the Root Provider, you need a wrapper with use client
directive.
'use client' ;
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 >
) ;
}
Use it instead of your previous Root Provider
import { Provider } from './provider' ;
import type { ReactNode } from 'react' ;
export default function Layout ({ children } : { children : ReactNode }) {
return (
< html lang = "en" >
< body >
< Provider > { children } </ Provider >
</ body >
</ html >
) ;
}
For the setup guide, see Integrate Algolia Search . Make sure you have algoliasearch
installed on your project.
While generally we recommend building your own search with their client-side
SDK, you can also plug the built-in dialog interface.
Create a new search dialog:
'use client' ;
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 } /> ;
}
Replace appId
, apiKey
and indexName
with your desired values.
Replace the default search dialog with a separate client component, see Replace Search Dialog for details.
Note
The built-in implementation doesn't use instant search (their official
javascript client).
Same as the default search client, you can configure Tag Filter on the dialog.
import SearchDialog from 'fumadocs-ui/components/dialog/search-algolia' ;
< SearchDialog
defaultTag = "value"
tags = { [
{
name : 'Tag Name' ,
value : 'value' ,
},
] }
/> ;
To use other search solutions such as ElasticSearch, you can replace the
default dialog with your own.
Since you cannot pass a function to client components, wrap the provider in another client component, and use the new provider in your root layout instead.
'use client' ;
import { RootProvider } from 'fumadocs-ui/provider' ;
import dynamic from 'next/dynamic' ;
const SearchDialog = dynamic ( () => import ( '@/components/search' )) ;
export function Provider ({ children } : { children : React . ReactNode }) {
return (
< RootProvider
search = {{
SearchDialog ,
}}
>
{ children }
</ RootProvider >
) ;
}
If you want to use the built-in search dialog UI instead of building your own,
you may use the SearchDialog
component.
import {
SearchDialog ,
type SharedProps
} from 'fumadocs-ui/components/dialog/search'
export default function CustomSearchDialog ( props : SharedProps ) { ... }
Unstable
It is an internal API, might break during iterations