Pagefind Component UI
Use one of the prebuilt search experiences, or assemble your own. Either way, you can customise most things.
Clean, easy to restyle, and accessible out of the box. 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
Option 1: Use Pagefind’s bundled files
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>
Option 2: Install via npm
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';
Choose Your Search Style
The Component UI offers two “prebuilt” drop-in options, or you can go in any direction using the components individually.
Modal Search
This is the most universal search UI, and doesn’t need much integration with your site, apart from somewhere to place the trigger.
The default modal can be placed with:
<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.
Searchbox
Another common search experience is the search dropdown, often placed in a navigation.
Want the searchbox?
<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.
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: