Zum Inhalt springen
UI Kit
Accent

Help Center

Suche mit Kategorien, Artikellisten, ein Artikel mit Rückmeldung, Support nach Dringlichkeit, Dienststatus und Videoanleitungen.

6 Variants
Kategorie wechseln

Hilfecenter

Artikelliste

Kategorien an der Seite, die Artikel einer Kategorie mit Lesezeit.

Artikel mit Navigation

Ein Artikel zwischen Bereichsnavigation und „Auf dieser Seite“, am Ende „War das hilfreich?“.

Kontakt nach Dringlichkeit

Vier Wege zum Support, sortiert von kritisch bis nicht eilig.

Status der Dienste

Gesamtzustand, 90 Tage je Dienst und die letzten Vorfälle.

Videoanleitungen

Ein Player mit Kapiteln und einer Playlist an der Seite.

Details

Was Hilfecenter mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
6
Version
1.0.1 · seit 1.0.0
Datei
components/ui/help-center.tsx
Bringt mit
utilskitbuttonicontextareasectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 37 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle HelpCenterProps aus components/ui/help-center.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    HelpCenterVariant

    searcharticlesarticlecontactstatusvideos

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • categoriesoptional
    HelpCategory[]
  • articlesoptional
    HelpArticle[]
  • popularoptional
    string[]

    search: suggestions under the field

  • articleoptional
    HelpArticleDetail
  • channelsoptional
    HelpChannel[]
  • servicesoptional
    HelpService[]
  • incidentsoptional
    HelpIncident[]
  • checkedAtoptional
    string

    status: e.g. "2 minutes ago"

  • videosoptional
    HelpVideo[]
  • contactHrefoptional
    string

    Link for "Contact support" and similar

  • onFeedbackoptional
    (helpful: boolean, note?: string) => void
  • actionoptional
    { label: string; href: string }

Eingebaute Texte

Diese Texte schreibt Hilfecenter selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 37 Texte anzeigen
searchEnglisch Search the help centerDeutsch Hilfe durchsuchen
placeholderEnglisch Search articlesDeutsch Artikel durchsuchen
popularEnglisch PopularDeutsch Häufig gesucht
tryHintEnglisch Try “{q}”Deutsch Probier „{q}“
resultsEnglisch {n} resultsDeutsch {n} Ergebnisse
resultEnglisch {n} resultDeutsch {n} Ergebnis
noResultsEnglisch Nothing found for “{q}”Deutsch Nichts gefunden für „{q}“
noResultsHintEnglisch Try a shorter word or write to us, a person answers within the hour.Deutsch Probier ein kürzeres Wort oder schreib uns, ein Mensch antwortet innerhalb einer Stunde.
contactEnglisch Contact supportDeutsch Support kontaktieren
articlesEnglisch {n} articlesDeutsch {n} Artikel
categoriesEnglisch CategoriesDeutsch Kategorien
inSectionEnglisch In this sectionDeutsch In diesem Bereich
onPageEnglisch On this pageDeutsch Auf dieser Seite
updatedEnglisch Updated {d}Deutsch Aktualisiert {d}
helpfulEnglisch Was this helpful?Deutsch War das hilfreich?
yesEnglisch YesDeutsch Ja
noEnglisch NoDeutsch Nein
thanksEnglisch Thank you for telling us.Deutsch Danke für deine Rückmeldung.
whatMissingEnglisch What was missing?Deutsch Was hat gefehlt?
sendEnglisch Send feedbackDeutsch Rückmeldung senden
sentEnglisch Thank you. We read every note and improve the article.Deutsch Danke. Wir lesen jede Notiz und verbessern den Artikel.
responseEnglisch Answer withinDeutsch Antwort in
availabilityEnglisch AvailableDeutsch Erreichbar
clearEnglisch Clear searchDeutsch Suche leeren
allGoodEnglisch All systems operationalDeutsch Alle Systeme laufen
someIssuesEnglisch Some systems have problemsDeutsch Einige Systeme haben Probleme
checkedEnglisch Checked {t}Deutsch Geprüft {t}
daysEnglisch {n} days agoDeutsch vor {n} Tagen
todayEnglisch TodayDeutsch Heute
uptimeEnglisch uptimeDeutsch Verfügbarkeit
incidentsEnglisch Recent incidentsDeutsch Letzte Vorfälle
subscribeEnglisch Get updatesDeutsch Updates erhalten
playlistEnglisch PlaylistDeutsch Playlist
chaptersEnglisch ChaptersDeutsch Kapitel
playEnglisch Play {t}Deutsch {t} abspielen
nowPlayingEnglisch Now playingDeutsch Läuft gerade
videosEnglisch {n} videosDeutsch {n} Videos

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Hilfecenter reagiert selbst auf die Tasten Escape, Pfeil hoch, Pfeil runter und Leertaste.
  • Setzt aria-current, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen img und search.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 18 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Hilfecenter?

Mit aiw add @ai-website/help-center. Der Befehl legt die Datei components/ui/help-center.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, textarea, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Hilfecenter?

6 Varianten, Suche mit Kategorien, Artikelliste, Artikel mit Navigation, Kontakt nach Dringlichkeit, Status der Dienste und Videoanleitungen. Du wählst sie mit der Prop variant, zum Beispiel variant="articles".

Kann ich die Texte von Hilfecenter übersetzen?

Ja. Hilfecenter bringt 37 eigene Texte auf Deutsch und Englisch mit, etwa „Hilfe durchsuchen“, „Artikel durchsuchen“ und „Häufig gesucht“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Hilfecenter einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Hilfecenter mit aiw_components und installieren sie mit aiw_add @ai-website/help-center. Nenn im Prompt die Variante, etwa variant="search", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Help Center stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert