Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting .
DocumentationBuilt-In ComponentsSearch

Search Component

A built-in search component provides a seamless and fast search experience out of the box. Under the hood, it leverages the Pagefind package  — a fully client-side search engine optimized for static sites. Pagefind indexes your content at build time and enables highly performant, zero-JavaScript-dependency searches at runtime.

Exported from nextra/components.

Props

NameTypeDefault
emptyResultReactNode

Not found text.

'No results found.'
errorTextReactNode

Error text.

'Failed to load search index.'
loadingReactNode

Loading text.

'Loading…'
placeholderstring

Placeholder text.

'Search documentation…'
classNamestring

CSS class name.

searchOptionsPagefindSearchOptions
onSearch(query: string) => void

Callback function that triggers whenever the search input changes.

This prop is not serializable and cannot be used directly in a server-side layout.

To use this prop, wrap the component in a client-side wrapper. Example:

'use client'
 
import { Search } from 'nextra/components'
 
export function SearchWithCallback() {
  return (
    <Search
      onSearch={query => {
        console.log('Search query:', query)
      }}
    />
  )
}

Then pass the wrapper to the layout:

<Layout search={<SearchWithCallback />} {...rest} />

See

Nextra search setup guide 

HeadBleed