Help center
ProA 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.
Live screen · 1440 × 900
- 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
- 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 ( <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> );}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.
PropTypeDefaultDescription
articlesHelpArticle[]sample articlesArticles 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.categoriesHelpCategory[]sample categoriesCollections with id, name, description, an icon key (start, billing, team, integrations, security, troubleshooting) and an optional tone.brandstring"Fernway"Product name in the workspace switcher and on the help site.headingstring"How can we help?"Heading above the big search on the help site.suggestionsstring[]["invoice", "single sign-on", "slack"]Quick searches under the help site search.defaultArticleIdstring–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[]searchArticlesRanks results for the article list and the help site. The default requires every word and ranks title matches above summary and body matches.searchesHelpSearchQuery[]sample queriesTop searches with count, click rate and the article they land on, for Search insights and the article panel.missedSearchesHelpMissedSearch[]sample queriesSearches that found nothing. Draft article turns one into a new draft.feedbackHelpFeedbackItem[]sample commentsReader comments with the article, vote, name, company, avatar, date and resolved flag.viewer{ name: string; avatar?: string; email?: string }Jordan ReyesThe person signed in. New drafts are theirs and Only my articles filters by them.siteUrlstring"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.classNamestring–Extra class on the root.- /
- Focuses the article search.
- Arrow downorArrow up
- Moves the selection through the article list at once; also moves through help site results.
- HomeorEnd
- Selects the first or last article.
- EnterorArrow right
- Opens the selected article and focuses its title. On phones the reader slides over the list.
- Alt+Arrow upordown
- Moves the selected article up or down inside its collection, in site order.
- Arrow leftorright
- 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.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.