Nextra Search Dialog

A search dialog component integrated with Pagefind for documentation sites. Features search input, result filtering, and navigation.

Live demo at https://nextra.phucbm.com/

Installation

Step 1

pnpm dlx shadcn@latest add https://ui.phucbm.com/r/nextra-search-dialog.json

Step 2

Add search bar into your site.


import {getPageMap} from "nextra/page-map";
import {NextraSearchDialog} from "@/components/nextra-search-dialog";
import {getPagesFromPageMap} from "@/lib/getPagesFromPageMap";


<NextraSearchDialog pages={await getPagesFromPageMap({pageMap: await getPageMap()})}/>

Examples

Nextra Docs Theme

Replace the default Nextra search with this component in layout.tsx


export default async function RootLayout({children}) {
    const pageMap = await getPageMap();
 
    const pages = await getPagesFromPageMap({
        pageMap: pageMap,
        // Modify the items if needed
        filterItem: async (item) => {
            console.log('item', item);
            return {
                ...item,
            } as PageItem;
        }
    });
 
 
    return (
        <Layout
            // banner={banner}
            navbar={navbar}
            pageMap={pageMap}
            search={<NextraSearchDialog pages={pages}/>}
        >
            {children}
        </Layout>
 
    )
}

Nextra Blog Theme

Put <NextraSearchDialog/> anywhere you want.


import {getPageMap} from "nextra/page-map";
import {NextraSearchDialog} from "@/components/nextra-search-dialog";
import {getPagesFromPageMap} from "@/lib/getPagesFromPageMap";


<NextraSearchDialog pages={await getPagesFromPageMap({pageMap: await getPageMap()})}/>