# Help center

> Help center with instant search, topics, article reader and feedback.

Block · Pro · https://lodeui.com/blocks/help-center

## When to use

- Self-serve support and knowledge bases.

## When not to use

- Developer API docs: use a docs layout with a table of contents.

## Installation

```bash
npx shadcn@latest add @lode/help-center
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HelpCenter } from "@/components/blocks/help-center";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <HelpCenter />
    </main>
  );
}
```

## API reference

### HelpCenter

A help center with an instant search hero, topic cards, an article reader with steps and feedback, and a contact fallback. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, topics and articles |
| Enter | Open |

## Accessibility

- Result counts are announced; articles use real headings and ordered steps.

## Motion

- Topics lift on hover; views slide between list and article; feedback swaps in place.

## Responsive behavior

- Topic cards are 1 or 2 columns.

## Performance

- Search is local; for large help centers, query your search service.

## Notes for AI

- Track "Was this helpful?" votes per article.

## Related

- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.
- [AI search](https://lodeui.com/blocks/ai-search) — Answer engine with streamed reasoning, inline citations, sources and follow-ups.
- [Table of contents](https://lodeui.com/components/table-of-contents) — On-this-page list that highlights the current section, with a gliding marker and progress ring.