Component System

The Pagefind Component UI is a set of web components that communicate through shared instances. This allows you to compose search interfaces from individual pieces, or use the prebuilt components that bundle everything together.

How Components Connect

Components on the same page automatically connect to each other. In this example, pagefind-input triggers searches, pagefind-summary shows the count, and pagefind-results displays the matches.

<pagefind-input></pagefind-input>
<pagefind-summary></pagefind-summary>
<pagefind-results></pagefind-results>

Named Instances

Use the instance attribute to create separate, independent search interfaces on the same page:

<!-- Documentation search -->
<pagefind-input instance="docs" placeholder="Search docs..."></pagefind-input>
<pagefind-results instance="docs"></pagefind-results>

<!-- Blog search -->
<pagefind-input instance="blog" placeholder="Search blog..."></pagefind-input>
<pagefind-results instance="blog"></pagefind-results>

Components with the same instance value share state. Components with different instance values are completely independent — they maintain separate search terms, filters, and results.

Component Categories

Full Experiences

These components provide complete, ready-to-use search interfaces:

• Modal — A dialog search with keyboard navigation. Supports custom inner structure
• Modal Trigger — A button that opens the modal
• Searchbox — A compact dropdown search

Building Blocks

These components can be composed together for custom layouts:

• Input — The search text field
• Results — The list of search results
• Summary — Shows result count and search status
• Keyboard Hints — Shows contextual keyboard shortcuts
• Filter Dropdown — A dropdown to filter by a specific facet
• Filter Pane — A sidebar-style filter panel with checkboxes

Configuration

• Config — Set options for the Component UI, or for Pagefind itself