---
title: "Help search hero"
description: "A help centre's opening search: results list in place under the field as you type, with the matched words marked, popular topics and a way to reach support."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/help-search-hero
---

# Help search hero

A help centre's opening search: results list in place under the field as you type, with the matched words marked, popular topics and a way to reach support.

A centred heading and line over one search field. Results list in place under it as you type, never in a popup: each article's title with the matched words marked, and its topic. Six or more results show five and a Show all row. The first result is what Enter opens, marked with a return key while the field has focus. Down arrow moves into the results and the arrows move along them; Escape goes back to the field, and Escape there clears it. A search with no matches says so and points to support. With nothing typed, popular topics sit under the field as links that run their search in place. Pass onOpenArticle to open a result without leaving the page.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/help-search-hero
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, field, input-group, item, kbd, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More faq blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/faq (Markdown: https://ui.edbn.me/docs/blocks/faq.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt