---
title: "Help centre page"
description: "Kilnwork's help centre: a search that lists articles in place, topic tiles, popular articles, an article with a sticky contents rail and feedback, and a support form."
plan: Pro
docs: https://ui.edbn.me/docs/templates/help-centre-page
---

# Help centre page

Kilnwork's help centre: a search that lists articles in place, topic tiles, popular articles, an article with a sticky contents rail and feedback, and a support form.

Kilnwork's site header and footer frame three views. The home has the help-search-hero block as its h1, listing articles in place as you type with the matched words marked and arrow keys to move along them; the six topics as tiles with their article counts, laid out like the faq-by-topic block; and the most read articles. A topic lists its articles with their summaries, with the other topics beside them. An article has a breadcrumb, numbered steps, notes and a picture of the screen built from components, a contents rail that sticks from 1024px and marks the section you're reading, the article-feedback block and related articles. Opening a view focuses its heading; the breadcrumb goes back and returns focus to the link that opened it, with the search as you left it. Every view ends with Still stuck?, the Pro support-ticket form adapted: email, topic (the one you're reading until you pick another), subject, message with a count, and attachments through the Pro file queue drawn with the Dropzone and Attachment components, which turns away files over 10 MB. Send waits for uploads, then shows "Ticket 48213 opened". An address names its view: #move-a-class opens that article and ?q= fills the search, so the site's 404 can link straight in. Every section shares the 1152px page width and one gutter, and lays out by its own width, so the page holds at 1440, 1024, 768 and 390.

A Pro page template 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-centre-page
```

## Dependencies
- npm: lucide-react@^1.33.0, zod@^4.3.5
- edbn: edbn-base, alert, attachment, breadcrumb, button, dropzone, field, input-group, item, kbd, navigation-menu, separator, sheet, spinner, text-link, form-core, form-fields, form-file-field

## Source

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

## More site pages templates

All 6, with install commands: https://ui.edbn.me/docs/templates/site-pages (Markdown: https://ui.edbn.me/docs/templates/site-pages.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