# Help center

> A help center workspace with an article library grouped by collection that you can drag to reorder, a reader that edits and publishes in place, and a panel showing views, votes and the searches that land on each article. It also has a live preview of the help site with instant search, search insights that turn missed searches into drafts, and a reader feedback inbox.

- Type: Screen (a complete app view, installed as a block)
- Page: https://uiarc.dev/components/screens/help-center
- Markdown: https://uiarc.dev/components/screens/help-center/markdown

- Access: Arc Pro
- Registry id: `help-center`
- Source file: `registry/blocks/help-center/help-center.tsx`
- Built from: Search field, Command palette, Card, Button
- Keywords: help center, knowledge base, help desk, support, articles, cms, docs admin, search insights, feedback, was this helpful, drag to reorder, faq

Use this as a self serve support site or in-app help. Load categories and articles from your CMS, pass a server search through search if you have one, and record votes through onFeedback; contact in the preview is simulated.

## When to use

- Managing a help center or knowledge base: writing, ordering and publishing articles
- Seeing which articles readers find helpful and what they search for
- A help site with instant search alongside its admin

## When not to use

- Developer API reference with a nav tree, use docs-sidebar
- A short FAQ on a marketing page, use faq-section
- Live chat with support, use support-conversation

## Installation

Help center is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/help-center
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```tsx
import { HelpCenter } from "@/components/arc/blocks/help-center/help-center";

export function Help({ articles, categories }) {
  return (
    <div style={{ height: "100dvh" }}>
      <HelpCenter
        brand="Acme"
        articles={articles}
        categories={categories}
        onArticleOpen={article => router.replace(`/admin/help/${article.id}`)}
        onArticleChange={article => fetch(`/api/help/${article.id}`, { method: "PUT", body: JSON.stringify(article) })}
        onReorder={(collection, ids) => fetch(`/api/help/collections/${collection}/order`, { method: "PUT", body: JSON.stringify(ids) })}
      />
    </div>
  );
}
```

## API reference

### HelpCenter

A help center workspace inside the Arc screen shell. Articles is a library grouped by collection with status filters, search, sort and drag to reorder, beside a reader where you rename, write and publish in place. A side panel, opened on demand from the header or the review meter, shows the outline that follows your reading, views and votes over 30 days, the searches that land on the article, its collection, visibility and review date, and open reader comments. Help site previews the public site with instant search, topics, articles and a helpful vote. Search insights shows headline figures, the searches that found nothing (each one a click from a draft) and the top queries. Feedback is an inbox of reader comments to resolve. The sidebar carries the Fernway Help workspace, the collections with their own icons and counts, and a quarterly review meter that opens the queue of articles due for a check.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `articles` | `HelpArticle[]` | `sample articles` | Articles with id, title, categoryId, summary, updated date, reading minutes, sections of paragraphs and optional steps, plus optional status (published, draft, review), views, votes, author, reviewed date, brand mark (slack, github, google, microsoft) and visibility. Array order is the order readers see inside a collection. |
| `categories` | `HelpCategory[]` | `sample categories` | Collections with id, name, description, an icon key (start, billing, team, integrations, security, troubleshooting) and an optional tone. |
| `brand` | `string` | `"Fernway"` | Product name in the workspace switcher and on the help site. |
| `heading` | `string` | `"How can we help?"` | Heading above the big search on the help site. |
| `suggestions` | `string[]` | `["invoice", "single sign-on", "slack"]` | Quick searches under the help site search. |
| `defaultArticleId` | `string` | – | Selects this article on mount, for deep links. |
| `defaultPage` | `"articles" \| "site" \| "insights" \| "feedback"` | `"articles"` | The page that opens first. |
| `search` | `(query: string, articles: HelpArticle[]) => HelpArticle[]` | `searchArticles` | Ranks results for the article list and the help site. The default requires every word and ranks title matches above summary and body matches. |
| `searches` | `HelpSearchQuery[]` | `sample queries` | Top searches with count, click rate and the article they land on, for Search insights and the article panel. |
| `missedSearches` | `HelpMissedSearch[]` | `sample queries` | Searches that found nothing. Draft article turns one into a new draft. |
| `feedback` | `HelpFeedbackItem[]` | `sample comments` | Reader comments with the article, vote, name, company, avatar, date and resolved flag. |
| `viewer` | `{ name: string; avatar?: string; email?: string }` | `Jordan Reyes` | The person signed in. New drafts are theirs and Only my articles filters by them. |
| `siteUrl` | `string` | `"https://help.fernway.app/articles"` | Base URL for copied article links. |
| `onArticleOpen` | `(article: HelpArticle) => void` | – | Called when an article is selected or opened on the help site, for routing or analytics. |
| `onArticleChange` | `(article: HelpArticle) => void` | – | Called with the whole article after an edit, a move to another collection, publishing or unpublishing. |
| `onReorder` | `(categoryId: string, articleIds: string[]) => void` | – | Called when the order inside a collection changes. |
| `onFeedback` | `(articleId: string, helpful: boolean, comment?: string) => void \| Promise<void>` | – | Records a vote and the optional comment from the help site. |
| `onContact` | `() => void \| Promise<void>` | – | Opens your support channel from the help site. Without it the preview simulates a sent request. |
| `className` | `string` | – | Extra class on the root. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| / | Focuses the article search. |
| Arrow down / Arrow up | Moves the selection through the article list at once; also moves through help site results. |
| Home / End | Selects the first or last article. |
| Enter or Arrow right | Opens the selected article and focuses its title. On phones the reader slides over the list. |
| Alt + Arrow up / down | Moves the selected article up or down inside its collection, in site order. |
| Arrow left / right | Moves between status, range and feedback filters. |
| Escape | Clears a search, closes a picker or the panel sheet, and leaves the title field. |
| Command K | Focuses the sidebar search, which filters the navigation. |

## Accessibility

- The article list is a listbox per collection with one tab stop that follows the selection; moves are announced politely.
- The drag handle is pointer only; Alt with the arrow keys does the same reorder from the keyboard.
- The collection picker opens a listbox in Arc's Popover with aria-activedescendant, returns focus on Escape and closes on Tab. Sort is Arc's DropdownMenu; status, range, visibility and feedback filters are Arc's SegmentedControl.
- Collection rows in the sidebar join the shell's arrow key roving and name their count and unpublished articles. Copy link keeps one accessible name and announces success or failure.
- Help site search is a combobox with a listbox of options and a polite result count. Articles use real headings, and outline links move focus to their heading with aria-current.
- Status is an icon and a word (globe for published, pencil for draft, clock for in review); votes and review state always pair colour with a word.

## Motion

- Filters use Arc's SegmentedControl highlight. Sidebar collections, the outline and picker options fill in place; hover fills land instantly.
- Selecting an article fills the row at once and the reader crossfades once; nothing else moves. The outline follows scrolling and fills the current heading in place. Publish and Unpublish share one width, and the sort trigger keeps its widest label, so nothing beside them shifts.
- Dragging lifts the row with a floating shadow and the others make room on the smooth spring.
- Figures use Arc's AnimatedCounter. Resolved comments and covered searches close their gap as they leave.
- On phones the reader slides in over the list in 200ms. Reduced motion removes travel, springs and counting and keeps every state.

## Responsive behavior

- The article panel starts closed. From 1080px it opens beside the page; below that it opens as a sheet from the header. Below 900px the navigation is a sheet too.
- Below 700px the article list fills the page and the reader slides over it with a back button. Below 600px search and sort share one row and the status control spans the next.
- Topic cards go from three to two to one column, insight figures from four to two, and the open by article summary moves under the list.

## Performance

- Filtering, ranking and grouping run in memory per keystroke; switch to a server search past a few thousand articles.
- Scroll tracking uses one passive listener per reader, and edge fades toggle attributes without re-rendering.
- Only dragged lists use layout animation; filtering and sorting update rows without moving them.

## Notes for AI

- Choose this for the admin side of a help center or knowledge base, with a preview of the public reader experience built in.
- Give the parent a definite height (the screen fills 100% of it); every region scrolls inside with hidden scrollbars and edge fades.
- Persist edits through onArticleChange and order through onReorder; the screen keeps its own working copy, so pass new articles with a key to reset it.
- Article sections are plain paragraphs and steps; new drafts hold plain text until published, when blank lines become paragraphs.
- Brand marks are sample content drawn inline from Simple Icons (CC0); they are not endorsements.

## Related

- [Sidebar: Docs](https://uiarc.dev/components/blocks/sidebar/markdown): A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.
- [FAQ section](https://uiarc.dev/components/blocks/faq-section/markdown): FAQs as an accordion, a topic rail, or a searchable list that highlights matches.
- [Support widget](https://uiarc.dev/components/blocks/support-widget/markdown): An in-app help launcher that grows into live article search, reading, and a chat with your team.
- [Support conversation](https://uiarc.dev/components/screens/support-conversation/markdown): A helpdesk conversation screen with inbox views, a live chat thread with notes and shared screenshots, and a composer for replies, notes, saved replies, articles and dropped files. The customer panel shows their profile, connected apps, linked issue, past conversations and an activity timeline.
- [Search results](https://uiarc.dev/components/blocks/search-results/markdown): A faceted workspace search page with suggestions, facet counts that follow the query, filter chips, mixed doc, person and file results with highlighted matches, a gliding keyboard cursor and a preview pane.

## Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt