Help centerPro
A help center with instant search, topic cards, and popular articles that open into a readable article with an outline and feedback.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { HelpCenter } from 'animui/help-center';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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.
import { HelpCenter } from "animui/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.
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.