# @pagefind/component-ui

> Modular web components for Pagefind search.

Latest version **1.6.0** (published 2026-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pagefind/component-ui
pnpm add @pagefind/component-ui
yarn add @pagefind/component-ui
bun add @pagefind/component-ui
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2026-11-01 |
| First published | 2026-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 598.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5521 |
| Author | Pagefind |
| Maintainers | bglw |

## Links

- npm: https://www.npmjs.com/package/@pagefind/component-ui
- Repository: https://github.com/Pagefind/pagefind
- Homepage: https://github.com/Pagefind/pagefind#readme
- Issues: https://github.com/Pagefind/pagefind/issues
- npm.io page: https://npm.io/package/@pagefind/component-ui

## Dependencies (2)

- [bcp-47](https://npm.io/package/bcp-47.md) ^2.1.2
- [adequate-little-templates](https://npm.io/package/adequate-little-templates.md) ^1.0.2

## Recent versions

- 1.6.0 (latest) — 2026-11-01
- 1.5.0-beta.2 (beta) — 2026-04-03
- 1.5.0-alpha.3 (alpha) — 2026-01-11
- 1.5.2 — 2026-04-12
- 1.5.0 — 2026-04-06
- 1.5.0-beta.1 — 2026-01-11

## README

# @pagefind/component-ui

Modular web components for Pagefind search.

## Installation

### Via npm

```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';
```

### Via Pagefind's bundled files

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>
```

## Quick Start

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>
```

## Documentation

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

**https://ui.pagefind.app/**

## License

MIT

---
_Source: https://npm.io/package/@pagefind/component-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._