Help centerPro
A help center with instant search, topic cards, and popular articles that open into a readable article with an outline and feedback.
Live block · sample data
- A public help center or knowledge base
- In-app help with searchable articles
- Support portals that deflect tickets with good answers
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
example.tsx
import { HelpCenter } from "@/components/arc/blocks/help-center/help-center"; export function Help({ articles, categories }) { return ( <HelpCenter brand="Acme" articles={articles} categories={categories} onArticleOpen={article => router.replace(`/help/${article.id}`)} onFeedback={(id, helpful, comment) => fetch("/api/help/feedback", { method: "POST", body: JSON.stringify({ id, helpful, comment }) })} /> );}HelpCenter
A help center app. The home screen leads with a large instant search, then topic cards, popular articles, and a contact card. Results appear under the field as you type with the matching words highlighted. Articles open in a reading view with breadcrumbs, a sticky on this page outline that follows your scroll, a feedback question, and related articles.
PropTypeDefaultDescription
articlesHelpArticle[]sample articlesArticles with id, title, categoryId, summary, updated label, reading minutes, popular flag, and sections of paragraphs and optional steps.categoriesHelpCategory[]sample categoriesTopics with id, name, description, and an icon key: start, billing, team, integrations, security, or troubleshooting.brandstring"Northwind"Name in the top bar.headingstring"How can we help?"Heading above the big search.suggestionsstring[]["invoice", "single sign-on", "slack"]Quick searches under the big search field.defaultArticleIdstring–Opens this article on mount, for deep links.search(query: string, articles: HelpArticle[]) => HelpArticle[]searchArticlesRanks results. The default requires every word and ranks title matches above summary and body matches.onFeedback(articleId: string, helpful: boolean, comment?: string) => void | Promise<void>–Records a vote and the optional comment.onContact() => void | Promise<void>–Opens your support channel. Without it the preview simulates a sent request.onArticleOpen(article: HelpArticle) => void–Called when an article opens, for routing or analytics.classNamestring–Extra class on the root.- Arrow downorArrow up
- Move through search results.
- Enter
- Opens the highlighted result.
- Escape
- Clears the search, then leaves the field.
- Tab
- Moves through topics, articles, the outline, and feedback.
- Search is a combobox with a listbox of options and aria-activedescendant; the result count is announced politely.
- Articles use real headings; outline links move focus to their section heading and mark the current one with aria-current.
- Breadcrumbs are a labelled navigation; the feedback area announces its thank you politely.
- Topic icons are decorative; every card is a button named by its text.
- Results drop in from the field with a short fade and scale; they are never animated while you arrow through them.
- Views slide 16px in the direction of travel, deeper to the right and back to the left.
- The outline bar follows the section you are reading on the snappy spring; clicking a section scrolls smoothly.
- Feedback states crossfade and the card resizes on the smooth spring. Reduced motion uses fades and instant scrolling.
- Topic cards go from one to two to three columns.
- The compact search moves into the top bar once you leave the home screen.
- The screen height is min(760px, 100dvh) and the page scrolls inside it.
- Search runs in memory on every keystroke; switch to a server search past a few thousand articles.
- Scroll tracking uses one passive listener and reads section positions only while scrolling.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose this for a self serve support site, a docs style help area, or an in-app help screen.
- Wire a server search through search when you have many articles; keep the combobox and highlight behavior.
- Article sections are plain text paragraphs and steps; render your CMS rich text inside the prose container if you need links or images.
- The outline appears from 860px of width; below that the article reads as one column.
The full library index for assistants is at /llms.txt.