Help center
Search with categories, article lists, an article with feedback, support by urgency, service status and video guides.
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
Details
What Help center brings along, read from the registry and the source.
- Area
- Content
- Variants
- 6
- Version
- 1.0.1 · since 1.0.0
- File
- components/ui/help-center.tsx
- npm packages
- None
- Languages
- English and German, 37 texts of its own
- Studio
- Adjust in code
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The HelpCenterProps interface from components/ui/help-center.tsx, with the comments from the code.
variantoptionalHelpCenterVariantsearcharticlesarticlecontactstatusvideos
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodecategoriesoptionalHelpCategory[]articlesoptionalHelpArticle[]popularoptionalstring[]search: suggestions under the field
articleoptionalHelpArticleDetailchannelsoptionalHelpChannel[]servicesoptionalHelpService[]incidentsoptionalHelpIncident[]checkedAtoptionalstringstatus: e.g. "2 minutes ago"
videosoptionalHelpVideo[]contactHrefoptionalstringLink for "Contact support" and similar
onFeedbackoptional(helpful: boolean, note?: string) => voidactionoptional{ label: string; href: string }
Built-in texts
Help center writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 37 texts
| Key | English | German |
|---|---|---|
| search | English Search the help center | German Hilfe durchsuchen |
| placeholder | English Search articles | German Artikel durchsuchen |
| popular | English Popular | German Häufig gesucht |
| tryHint | English Try “{q}” | German Probier „{q}“ |
| results | English {n} results | German {n} Ergebnisse |
| result | English {n} result | German {n} Ergebnis |
| noResults | English Nothing found for “{q}” | German Nichts gefunden für „{q}“ |
| noResultsHint | English Try a shorter word or write to us, a person answers within the hour. | German Probier ein kürzeres Wort oder schreib uns, ein Mensch antwortet innerhalb einer Stunde. |
| contact | English Contact support | German Support kontaktieren |
| articles | English {n} articles | German {n} Artikel |
| categories | English Categories | German Kategorien |
| inSection | English In this section | German In diesem Bereich |
| onPage | English On this page | German Auf dieser Seite |
| updated | English Updated {d} | German Aktualisiert {d} |
| helpful | English Was this helpful? | German War das hilfreich? |
| yes | English Yes | German Ja |
| no | English No | German Nein |
| thanks | English Thank you for telling us. | German Danke für deine Rückmeldung. |
| whatMissing | English What was missing? | German Was hat gefehlt? |
| send | English Send feedback | German Rückmeldung senden |
| sent | English Thank you. We read every note and improve the article. | German Danke. Wir lesen jede Notiz und verbessern den Artikel. |
| response | English Answer within | German Antwort in |
| availability | English Available | German Erreichbar |
| clear | English Clear search | German Suche leeren |
| allGood | English All systems operational | German Alle Systeme laufen |
| someIssues | English Some systems have problems | German Einige Systeme haben Probleme |
| checked | English Checked {t} | German Geprüft {t} |
| days | English {n} days ago | German vor {n} Tagen |
| today | English Today | German Heute |
| uptime | English uptime | German Verfügbarkeit |
| incidents | English Recent incidents | German Letzte Vorfälle |
| subscribe | English Get updates | German Updates erhalten |
| playlist | English Playlist | German Playlist |
| chapters | English Chapters | German Kapitel |
| play | English Play {t} | German {t} abspielen |
| nowPlaying | English Now playing | German Läuft gerade |
| videos | English {n} videos | German {n} Videos |
Accessibility
Read from the source of the component.
- Help center handles the keys Escape, Arrow up, Arrow down and Space itself.
- Sets aria-current, aria-label and aria-live, so screen readers announce purpose and state.
- Uses the roles img and search.
- Announces changes through a live region without moving focus.
- Every field has a label, visible or for screen readers.
- Adds text for screen readers where icons and graphics stand alone.
- Shows a visible focus ring when used with the keyboard.
- The server renders the starting state in full, JavaScript only adds the interaction.
Motion
- Rises in briefly the first time it comes into view (kit-rise, useInView).
- Moves with the scroll, its progress follows the position on the page.
- Brings animations of its own, calmly timed and without wobble.
- With reduced motion (prefers-reduced-motion) it stays still. 18 places in the code switch motion off then.
Frequent questions
How do I install Help center?
With aiw add @ai-website/help-center. The command puts components/ui/help-center.tsx into your project, the code is yours from then on. It brings along button, icon, textarea, section and reveal. It needs no further npm packages.
Which variants does Help center have?
6 variants, Search with categories, Article list, Article with navigation, Contact by urgency, Service status and Video guides. You pick one with the variant prop, for example variant="articles".
Can I translate the texts of Help center?
Yes. Help center carries 37 texts of its own in English and German, such as “Search the help center”, “Search articles” and “Popular”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Help center?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Help center with aiw_components and install it with aiw_add @ai-website/help-center. Name the variant in your prompt, for example variant="search", and the assistant writes your content straight into the props.
Similar components, Often combined with
Similar components
More from Content, the same area of the kit.
- Events and webinarsAgendas, speakers, tickets and recordings.
- Legal pagesImprint, privacy policy, terms and cookie notices people can read.
- PortfolioProjects and work, as grids and detail pages.
- Case studiesCustomer stories with results.
- All of ContentSections that tell and ask. Blog, long reads, team, about, docs, legal pages, contact and forms.
Often combined with
Sections that usually sit next to Help center on a page.
Loading the source