@pagefind/component-ui

Modular web components for Pagefind search.

Installation

bash

npm install @pagefind/component-ui

Import the components and styles:

javascript

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

If your bundler doesn't support the /css export, import the CSS file directly:

javascript

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

After running Pagefind, include the generated files from your output directory:

html

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

Add a modal search to your site:

html

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

Or use a searchbox dropdown:

html

<pagefind-searchbox></pagefind-searchbox>

Or build your own layout with individual components:

html

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

For full documentation, component references, styling guides, and examples, visit:

MIT