Help Center Template für React: Suche, Themen, Artikel

Wer ein Help Center öffnet, sucht meistens genau eine Antwort und will sie haben, bevor er aufgibt und dem Support schreibt. Ein gutes Help Center Template ist darauf ausgelegt: eine Suche, die schon beim Tippen antwortet, Themen für alle, die lieber stöbern, die Artikel, die ohnehin jeder liest, und ein klarer Weg zu einem Menschen, wenn der Artikel nicht reicht. Dieser Guide geht die beiden Screens durch, aus denen ein React Help Center besteht, eine Support-Startseite und eine Artikelseite, am Beispiel unserer Vorlagen Help Center Page und Help Article Page. Wir verkaufen sie, sind also nicht neutral, aber Aufbau und Stolperfallen gelten für jede Help Center Vorlage und jedes React Knowledge Base Template. Der letzte Abschnitt sagt, wann eine Docs-Engine oder ein Template mit CMS das bessere Werkzeug ist.

Was braucht die Startseite eines Help Centers?

Sechs Teile, in dieser Reihenfolge: eine Suche mit Live-Ergebnissen, eine Reihe häufiger Fragen, eine Statuszeile, Themenkarten, beliebte Artikel und ein Weg zu einem Menschen. Die Help Center Templates, die im November 2026 für diese Suche rankten (Kits auf ThemeForest, das Template von BaseHub, Notion-Sammlungen und Beiträge von Anbietern zum Help Center Design), sind sich einig: Suche zuerst, dazu klare Kategorien. Kaum eines zeigt, was nach dem ersten Tastendruck passiert, und genau dort findet ein Besucher die Antwort oder eröffnet ein Ticket. So sehen die einzelnen Teile auf unserer Support-Startseite aus:

• Eine große Suche mit Live-Ergebnissen. Die Ergebnisse erscheinen schon beim Tippen unter dem Feld, nach Thema gruppiert, und die gefundenen Wörter sind in Titel und Zusammenfassung markiert. Das Feld zeigt, wie viele Artikel passen.
• Beliebte Chips unter dem Feld. Einmal antippen füllt die Suche mit einer häufigen Frage (Teammitglieder einladen, Rechnungen, SSO).
• Eine Status-Pill über dem Titel. Ein grüner, gelber oder roter Punkt mit einer Zeile Text, verlinkt auf deine Statusseite. Während eines Ausfalls beantwortet diese Zeile die Frage, mit der die meisten Besucher kommen.
• Themenkarten mit der Zahl ihrer Artikel, für alle, die stöbern.
• Beliebte Artikel, nummeriert, die sechs Fragen, die du jeden Tag beantwortest.
• Still need help? Chat, E-Mail und Community, jeweils mit einer konkreten Angabe wie der Antwortzeit.

Drück irgendwo auf der Seite /, um in die Suche zu springen. Pfeil nach unten führt in die Ergebnisse, Pos1 und Ende springen an den Anfang und ans Ende, Enter öffnet einen Treffer und Escape bringt dich zurück ins Feld. Mehr als fünf Ergebnisse klappen hinter „Show all“ zusammen (maxResults). Wenn nichts passt, bietet der leere Zustand „Clear search“ und „Contact support“ an. Eine erfolglose Suche endet also bei einem Menschen und nie in einer Sackgasse.

Wie installierst du das Help Center Template?

Beide Screens sind Pro-Vorlagen. Die CLI kopiert sie mit allen Komponenten, die sie importieren:

npx wingo-ui@latest add help-center-page help-article-page

Die Dateien landen in components/templates/: help-center-page.tsx, help-article-page.tsx und je eine Datendatei mit typisierten Beispielinhalten (24 Artikel in sechs Themen für ein erfundenes Produkt namens Acme). Diese Daten ersetzt du durch deine.

Wie bindest du es in eine Next.js-Route ein?

Die Seite nimmt einfache Daten entgegen: Kategorien, einen Artikelindex, beliebte Artikel und Kontaktwege. Einige Labels, die Kontakt-Icons und die Link-Komponente des Routers sind Funktionen oder Komponenten, die nicht aus einer Server Component heraus übergeben werden können, und die Vorlagen sind ohnehin Client Components. Die saubere Aufteilung ist eine Server-Route, die die URL liest, und eine kleine Client-Datei, der die Daten und die Callbacks gehören.

Fang mit dem Index an. Lass die Artikeltexte draußen, denn der Index wird für die Live-Suche an den Browser ausgeliefert:

// app/help/content.ts
import { createElement } from "react"
import { CreditCard, Mail, MessageCircle, Rocket } from "lucide-react"
import type {
  HelpCenterArticle,
  HelpCenterCategory,
  HelpCenterContactOption,
} from "@/components/templates/help-center-page-data"

export const CATEGORIES: HelpCenterCategory[] = [
  { value: "getting-started", label: "Erste Schritte", description: "Richte einen Workspace ein und lade dein Team ein.", icon: createElement(Rocket) },
  { value: "billing", label: "Abrechnung", description: "Tarife, Rechnungen, Erstattungen und Steuern.", icon: createElement(CreditCard) },
]

export const ARTICLES: HelpCenterArticle[] = [
  {
    slug: "invite-teammates",
    title: "Teammitglieder und Gäste einladen",
    excerpt: "Verschick Einladungen per E-Mail oder teil einen Beitrittslink. Gäste sehen nur die Projekte, zu denen du sie hinzufügst.",
    category: "getting-started",
    minutes: 2,
    updated: "2026-10-30",
    keywords: ["benutzer hinzufügen", "platz", "beitrittslink"],
  },
  {
    slug: "download-an-invoice",
    title: "Eine Rechnung herunterladen",
    excerpt: "Zu jeder Zahlung gibt es unter Einstellungen, Abrechnung eine PDF-Rechnung. Du kannst einen Firmennamen und eine Steuernummer ergänzen.",
    category: "billing",
    minutes: 1,
    updated: "2026-10-12",
    keywords: ["quittung", "mwst", "pdf", "steuernummer"],
  },
]

export const POPULAR = ARTICLES.slice(0, 6)

export const CONTACT: HelpCenterContactOption[] = [
  { icon: MessageCircle, title: "Chatte mit uns", description: "Sprich direkt von dieser Seite aus mit dem Support-Team.", meta: "Werktags 9 bis 18 Uhr ET", action: "Chat starten", href: "/contact?topic=chat" },
  { icon: Mail, title: "Support per E-Mail", description: "Schick uns die Details und einen Screenshot.", meta: "Antwort innerhalb eines Werktags", action: "support@example.com", href: "mailto:support@example.com" },
]

Die Client-Datei übergibt die Daten, next/link und einen onSearch-Handler:

// app/help/help-center.tsx
"use client"

import Link from "next/link"
import { HelpCenterPage, type HelpCenterPageStatus } from "@/components/templates/help-center-page"
import { ARTICLES, CATEGORIES, CONTACT, POPULAR } from "./content"

export function HelpCenter({ query, status }: { query: string; status: HelpCenterPageStatus }) {
  return (
    <HelpCenterPage
      linkComponent={Link}
      header={false}
      footer={false}
      categories={CATEGORIES}
      articles={ARTICLES}
      popularArticles={POPULAR}
      topics={["Teammitglieder einladen", "Rechnungen", "SSO"]}
      contactOptions={CONTACT}
      defaultQuery={query}
      status={status}
      statusHref="/status"
      labels={{ description: "Anleitungen und Antworten vom Support-Team von Example." }}
      onSearch={(q) => {
        if (q) navigator.sendBeacon("/api/help-search", JSON.stringify({ q }))
      }}
    />
  )
}

Die Route liest ?q= (in Next.js 16 ist searchParams ein Promise), damit ein Link wie /help?q=rechnung gleich mit Ergebnissen öffnet:

// app/help/page.tsx
import { HelpCenter } from "./help-center"

export default async function HelpRoute({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q = "" } = await searchParams
  return <HelpCenter query={q} status="operational" />
}

Setz header={false} und footer={false}, wenn die Route in deinem Website-Layout sitzt; für eine eigenständige Support-Website lässt du beide an. design schaltet den ganzen Look zwischen classic, bold und minimal um.

Wie entscheidet die Suche, was passt?

Diesen Teil solltest du verstehen, bevor du Artikel schreibst. Jedes getippte Wort muss im Titel, im Auszug, im Themennamen oder in den keywords des Artikels vorkommen, und Treffer im Titel stehen oben. Groß- und Kleinschreibung und Akzente spielen keine Rolle. Der Artikeltext selbst wird nie durchsucht.

Das hat zwei Folgen. Erstens entscheidet das Feld keywords darüber, ob eine Suche trifft. Kunden tippen „Quittung“, wenn dein Artikel „Rechnung“ sagt, und „Benutzer hinzufügen“, wenn dort „Teammitglieder einladen“ steht. Diese Wörter gehören in keywords. Zweitens: Protokollier, wonach die Leute suchen. onSearch feuert, sobald das Tippen pausiert, bei Enter und wenn jemand einen Chip wählt, also liefert dir der Beacon oben eine Liste echter Suchanfragen. Weil er bei jeder Pause feuert, stehen im Log auch halbe Wörter wie „rech“ neben „rechnung“: Behalte pro Besuchersitzung die längste Anfrage, bevor du zählst. Die Anfragen, die in einem Klick auf einen Kontaktweg enden, sind die Artikel, die du noch nicht geschrieben hast.

Die lokale Suche reicht für ein paar Hundert Artikel, weil der Index klein bleibt. Brauchst du eine Volltextsuche über die Artikeltexte oder Platz für Tausende Artikel, setz eine Serversuche hinter die Komponente Global Search. Sie nimmt loadResults(query, { signal, scope }) entgegen, entprellt den Aufruf, bricht veraltete Anfragen ab und gruppiert die Antworten. Das kleinere Search Input ist nur das Feld allein. Für eine Befehlspalette über die ganze App lies unseren Guide zur React Command Palette.

Was gehört auf eine Hilfeartikel-Seite?

Eine Vorlage für Hilfeartikel hat eine Aufgabe: die Leser durch die Schritte bringen und sie auffangen, wenn sie hängen bleiben. Die Artikelseite rendert einen Markdown-Artikel: eine Breadcrumb zurück zum Help Center und zum Thema, eine Suchleiste, eine Seitenleiste mit den anderen Artikeln des Themas, den Text, ein Inhaltsverzeichnis, die Frage „Was this article helpful?“, eine Kontaktkarte und verwandte Artikel.

Der Text läuft durch die Komponente Markdown, mit zwei Ergänzungen. Ein Alert-Zitat im GitHub-Stil wird zur Hinweisbox, und Inline-Code, der mit kbd: beginnt, wird zu einer Tastenkappe, die die passende Modifier-Taste für das Gerät zeigt:

1. Öffne die Aufgabe oder leg mit `kbd:c` eine neue an.
2. Klick neben dem Fälligkeitsdatum auf **Wiederholen**.

> [!TIP]
> Du bist schon in der Aufgabe? Drück `kbd:shift+r`, um das Menü Wiederholen zu öffnen.

Das Table of Contents baut sich selbst aus den Überschriften ## und ### des Textes. Ab 1280px klebt es rechts, darunter wird es zu einer Pill unter dem Header. Die Themen-Seitenleiste wird unter 1024px zu einem Bottom Sheet.

Eingebunden wird es über eine statische Route, die das Markdown auf dem Server liest:

// app/help/[slug]/page.tsx
import { readFile } from "node:fs/promises"
import path from "node:path"
import { notFound, redirect } from "next/navigation"
import { ARTICLES, CATEGORIES } from "../content"
import { HelpArticleView } from "./help-article"

export const dynamicParams = false

export function generateStaticParams() {
  return [...ARTICLES.map((a) => ({ slug: a.slug })), ...CATEGORIES.map((c) => ({ slug: c.value }))]
}

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const topic = CATEGORIES.find((c) => c.value === slug)
  if (topic) redirect(`/help?q=${encodeURIComponent(topic.label)}`)
  const meta = ARTICLES.find((a) => a.slug === slug)
  if (!meta) notFound()
  const body = await readFile(path.join(process.cwd(), "content/help", `${slug}.md`), "utf8")
  return <HelpArticleView article={{ ...meta, body }} />
}

// app/help/[slug]/help-article.tsx
"use client"

import Link from "next/link"
import { HelpArticlePage } from "@/components/templates/help-article-page"
import type { HelpArticle } from "@/components/templates/help-article-page-data"
import { ARTICLES, CATEGORIES } from "../content"

export function HelpArticleView({ article }: { article: HelpArticle }) {
  const related = ARTICLES.filter((a) => a.category === article.category && a.slug !== article.slug).slice(0, 3)
  return (
    <HelpArticlePage
      linkComponent={Link}
      header={false}
      footer={false}
      article={article}
      articles={ARTICLES}
      categories={CATEGORIES}
      relatedArticles={related}
      supportEmail="support@example.com"
      onFeedback={(helpful, comment) =>
        fetch("/api/help-feedback", {
          method: "POST",
          body: JSON.stringify({ slug: article.slug, helpful, comment }),
        })
      }
    />
  )
}

Welche Stolperfallen solltest du vermeiden?

• Themen und Artikel teilen sich einen URL-Raum. Themenkarten verlinken auf /help/<value>, Artikel auf /help/<slug>, also kollidieren ein Thema namens billing und ein Artikel namens billing. Halte die Namen auseinander. Das Kit hat keinen eigenen Screen, der die Artikel eines Themas auflistet; der Redirect oben schickt ein Thema in die Suche, die den Themennamen findet und seine Artikel gruppiert anzeigt.
• onFeedback läuft bei No zweimal. Einmal, wenn der Leser No drückt, und noch einmal mit dem Kommentar. Speichere eine Zeile pro Leser und Artikel und aktualisiere sie.
• Eine Status-Pill, die lügt, ist schlimmer als gar keine. Übergib den echten Zustand aus deinem Monitoring oder setz showStatus={false}. Unser Tutorial zur Statusseite mit Next.js und die Vorlage Status Page behandeln die Seite, auf die sie verlinkt.
• Lange Auszüge begraben die Ergebnisse. Ein oder zwei Sätze, formuliert als Antwort und nicht als Teaser.

Auf dem Handy scrollen die Themen-Chips seitlich, die Karten stapeln sich in einer Spalte, und auf Touchscreens ist jedes Ziel 44px groß.

Wann sind Nextra, Fumadocs oder ein fertiges Kit die bessere Wahl?

Ein Help Center Template beantwortet Support-Fragen. Entwickler-Doku ist eine andere Aufgabe, für die meist ein Docs Website Template oder ein Framework besser geeignet ist. Die Werkzeuge unten haben wir am 6. November 2026 geprüft:

Nimm Nextra oder Fumadocs, wenn du Hunderte MDX-Seiten, eine API-Referenz oder Versionen hast; sie durchsuchen den ganzen Text und liefern die Navigation gleich mit. Nimm das Template von BaseHub, wenn Nicht-Entwickler die Artikel schreiben und dir Volltextsuche wichtiger ist, als die Datenschicht selbst zu besitzen. Nimm ein Helpdesk-Kit, wenn dein Produkt das Support-Tool ist. Für eine Startseite vor deiner Doku hat unsere Vorlage Docs Home Page eine Suchpalette, Quick Starts und API-Beispiele. Für weniger als etwa 30 Fragen reicht eine einzelne FAQ Page, und die ist kostenlos.

Weitere Screens dieser Art findest du unter Praxis: Screens und Apps, und der Guide zum SaaS Website Template zeigt, wo das Help Center zwischen den übrigen Seiten einer Produkt-Website steht. Sein nächster Nachbar ist die Changelog Vorlage, die „Ist das schon behoben?“ beantwortet, bevor jemand ein Ticket öffnet.

Wo fängst du an?

Öffne die Help Center Page und probier ein paar Suchen aus, dann tausch die Beispieldaten gegen zehn deiner eigenen Artikel mit ehrlichen Keywords. Beide Screens gehören zu Wingo UI Pro, ab $8 im Monat (Preise); wenn dir eine einzelne Support-Seite vorerst reicht, fang mit der kostenlosen FAQ Page an.

Häufige Fragen

Was gehört auf die Startseite eines Help Centers?

Ein Suchfeld, das schon beim Tippen Ergebnisse zeigt, Themenkarten mit der Zahl ihrer Artikel, die fünf oder sechs meistgelesenen Artikel, Wege zu einem Menschen (Chat, E-Mail, Community) und der aktuelle Systemstatus. Alles Weitere schiebt die Suche nur nach unten.

Was ist der Unterschied zwischen Help Center, Wissensdatenbank und FAQ-Seite?

Die Wissensdatenbank ist die Sammlung der Artikel, das Help Center die öffentliche Website drumherum, mit Suche, Themen und Kontaktwegen. Eine FAQ-Seite ist eine einzelne Seite mit kurzen Antworten und reicht, solange du weniger als etwa 30 Fragen hast.

Durchsucht das Help Center von Wingo UI den ganzen Artikeltext?

Nein. Es sucht jedes getippte Wort in Titel, Auszug, Themenname und Keywords jedes Artikels und setzt Treffer im Titel nach oben. Für eine Volltextsuche über die Artikeltexte nimmst du eine Serversuche hinter der Komponente Global Search oder eine Docs-Engine mit einem Index aus dem Build, etwa Pagefind.

Sollte ich statt eines Help Center Templates Nextra oder Fumadocs nehmen?

Nimm eines der beiden, wenn es um Entwickler-Doku geht: Hunderte MDX-Seiten, eine API-Referenz, Versionen und Suche über den ganzen Text. Ein Help Center Template passt zu Support-Inhalten für Kunden, bei denen es darum geht, eine Frage schnell zu beantworten und einen Menschen anzubieten, wenn der Artikel nicht reicht.

Ist das Help Center Template von Wingo UI kostenlos?

Nein, Help Center Page und Help Article Page gehören zu Wingo UI Pro. Die Vorlage FAQ Page ist kostenlos und deckt eine kleinere Support-Seite mit Suche, Themen und Kontaktkarten ab.