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
classNamestring

Input container CSS class name.

placeholderstring

Placeholder text.

'Search documentation…'
emptyResultReactNode

Not found text.

'No results found.'
errorTextReactNode

Error text.

'Failed to load search index.'
loadingReactNode

Loading text.

'Loading…'
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:

search-with-callback.jsx
'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:

app/layout.jsx
import { SearchWithCallback } from '../path/to/your/search-with-callback'
// ...
<Layout search={<SearchWithCallback />} {...rest} />
...propsOmit<ComboboxInputProps, "className" | "onChange" | "placeholder" | "value" | "onFocus" | "onBlur">

See

Nextra search setup guide 

HeadBleed