Pagefind Component UI

The Component UI is new. Documentation for the previous UI is still available — see usage and config.

Use one of the prebuilt search experiences, or assemble your own. Either way, you can customize most things. These components follow best practices for WAI-ARIA components, and are designed to be hard to misuse. Additionally, all components translate both visible and assistive text automatically to match the language of the website.

Quick Start

Script tag

After running Pagefind, include the stylesheet and script from your output directory:

<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>

Import

Install the package:

npm install @pagefind/component-ui

Import the CSS and components in your JavaScript:

import '@pagefind/component-ui';
import '@pagefind/component-ui/css';

Then, choose your search style. The Component UI offers two “prebuilt” drop-in options, or you can go in any direction using the components individually.

The most universal search UI that doesn’t need tight integration with your site.

<pagefind-modal-trigger></pagefind-modal-trigger>
<pagefind-modal></pagefind-modal>

If you want to tweak things, you can build up the entirety of the modal internals using the rest of the Component UI. Like most of the component UI, you can also hook your own components in.

Explore the modal →

Another common search experience is the search dropdown, often placed in a navigation.

<pagefind-searchbox></pagefind-searchbox>

Since this is a unified component, it isn’t built out of subcomponents. It still offers a lot of options, including custom result templates within the dropdown.

Explore the searchbox →

Build Your Own

Include your search directly in the page with individual components, or build these into your own larger search UI. These components communicate with each other wherever they’re placed:

Explore the component system →

Search UI