Overview

The Search component provides full-text search across all documentation pages. It integrates with Pagefind for fast, client-side search indexing.

Try it now — click the search button in the header or press Cmd+K (Mac) / Ctrl+K (Windows/Linux).

Features

• Keyboard shortcut — Cmd+K / Ctrl+K to open
• Escape to close — Press Esc to dismiss
• Modal dialog — Renders as a <dialog> element for proper accessibility
• Lazy loading — Pagefind UI is loaded on first open, not on page load
• Click outside — Clicking the backdrop closes the dialog

How It Works

1. At build time, Pagefind indexes all content within [data-pagefind-body]
2. Elements with data-pagefind-ignore are excluded from the index
3. On first search open, the Pagefind UI bundle is loaded dynamically
4. Search results link directly to the matching pages

Excluded Content

These elements are excluded from search indexing:

• Banner content (data-pagefind-ignore)
• Anchor link labels (data-pagefind-ignore)
• Navigation elements (outside data-pagefind-body)

CSS Classes

Class	Element
.search-widget	Outer wrapper
.search-trigger	Button that opens the modal
.search-label	Button label text
.search-dialog	The <dialog> element
.search-dialog-inner	Inner container
.close-button	Close button
.pagefind-container	Pagefind UI mount point

Platform Detection

The search button shows different keyboard shortcut hints based on platform:

Platform	Shortcut Shown
macOS	⌘ K
Windows/Linux	Ctrl K