blog

How can I customize the kbar search?

Add a SearchProvider component such as the one shown below and use it in place of the default SearchProvider component in app/layout.tsx.

defaultActions are the initial list of actions.

onSearchDocumentsLoad is a callback function that is called when the documents specified by searchDocumentsPath are loaded. Set searchDocumentsPath to false to disable the dynamically loaded search feature.

'use client'

import { KBarSearchProvider } from 'pliny/search/KBar'
import { useRouter } from 'next/navigation'
import { CoreContent } from 'pliny/utils/contentlayer'
import { Blog } from 'contentlayer/generated'

export const SearchProvider = ({ children }) => {
  const router = useRouter()
  return <KBarSearchProvider kbarConfig=>{children}</KBarSearchProvider>
}