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

> Ein React Help Center Template mit Live-Suche und Hervorhebung, Themenkarten, Top-Artikeln, Kontakt und Status, und wann Fumadocs oder Nextra besser passen.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 6. Nov. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/help-center-template
- Englische Fassung: https://wingo-ui.com/blog/help-center-template

## Kurz gesagt

Ein Help Center Template braucht eine Support-Startseite, deren Suche schon beim Tippen antwortet, Themenkarten, eine kurze Liste beliebter Artikel, Kontaktwege und eine Statuszeile, dazu eine Artikelseite mit Schritten, Hinweisboxen, Inhaltsverzeichnis und der Frage, ob der Artikel geholfen hat. Help Center Page und Help Article Page von Wingo UI sind genau diese beiden Screens als React-Komponenten, die du mit deinem eigenen Artikelindex und Markdown fütterst. Für große Entwickler-Dokus mit Versionen und Volltextsuche passt eine Docs-Engine wie Nextra oder Fumadocs besser.

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](https://wingo-ui.com/templates/help-center-page) und [Help Article Page](https://wingo-ui.com/templates/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.

> Live-Demo (Help Center Page): Tippe invite, drück dann Pfeil nach unten und geh die Ergebnisse durch; tippe spreadsheet formulas, um den leeren Zustand mit Contact support zu sehen. Probier sie unter [Help Center Page](https://wingo-ui.com/templates/help-center-page) aus und installier sie mit `npx wingo-ui@latest add help-center-page`.

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:

```bash
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:

```ts
// 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:

```tsx
// 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:

```tsx
// 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](https://wingo-ui.com/components/global-search). Sie nimmt `loadResults(query, { signal, scope })` entgegen, entprellt den Aufruf, bricht veraltete Anfragen ab und gruppiert die Antworten. Das kleinere [Search Input](https://wingo-ui.com/components/search-input) ist nur das Feld allein. Für eine Befehlspalette über die ganze App lies unseren [Guide zur React Command Palette](https://wingo-ui.com/de/blog/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.

> Live-Demo (Help Article Page): Scroll durch den Artikel: Das Inhaltsverzeichnis markiert den Abschnitt, den du gerade liest. Drück No unter Was this article helpful?, um das Kommentarfeld zu öffnen. Probier sie unter [Help Article Page](https://wingo-ui.com/templates/help-article-page) aus und installier sie mit `npx wingo-ui@latest add help-article-page`.

Der Text läuft durch die Komponente [Markdown](https://wingo-ui.com/components/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:

```md
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](https://wingo-ui.com/components/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:

```tsx
// 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 }} />
}
```

```tsx
// 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](https://wingo-ui.com/de/blog/nextjs-status-page) und die Vorlage [Status Page](https://wingo-ui.com/templates/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:

| Option | Was es ist | Suche | Passt, wenn |
|---|---|---|---|
| Wingo UI Help Center + Help Article | Zwei React-Screens, deine Daten als Props | Live, über Titel, Auszüge, Themen, Keywords | Kunden-Support für ein SaaS-Produkt |
| [Nextra 4](https://the-guild.dev/blog/nextra-4) | Framework für Doku und Blog auf Next.js, nur App Router | [Pagefind](https://nextra.site/docs/guide/search), Index nach dem Build, Volltext | MDX-Doku auf Next.js |
| [Fumadocs](https://fumadocs.dev/docs) | Doku-Framework für Next.js, React Router, TanStack Start, Waku und Astro | Im Kern eingebaut | Große Doku, beliebiges React-Framework |
| [BaseHub Help Center Template](https://docs.basehub.com/templates-and-examples/templates/help-center-template) | Next.js-Help-Center, dessen Artikel du im BaseHub-CMS bearbeitest | Volltext, laut Doku | Support-Autoren wollen einen CMS-Editor statt Markdown-Dateien |
| [Docy auf ThemeForest](https://themeforest.net/item/docy-react-documentation-knowledge-base-site-template/61091004) | Next.js-Template für Doku, Wissensdatenbank und Forum auf Bootstrap 5 | Im Angebot nicht beschrieben | Eine einmalige Website; $29 Regular License, zuletzt aktualisiert am 29. Dezember 2025 |
| [Frontkit Help Desk Kit](https://thefrontkit.com/docs/help-desk-kit/getting-started) | 110 Screens für Support-Mitarbeiter (Tickets, Chat, Editor für die Wissensdatenbank), nur UI | Auf der Doku-Seite nicht beschrieben | Du baust den Helpdesk selbst |

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](https://wingo-ui.com/templates/docs-home-page) eine Suchpalette, Quick Starts und API-Beispiele. Für weniger als etwa 30 Fragen reicht eine einzelne [FAQ Page](https://wingo-ui.com/templates/faq-page), und die ist kostenlos.

Weitere Screens dieser Art findest du unter [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build), und der [Guide zum SaaS Website Template](https://wingo-ui.com/de/blog/saas-website-template) zeigt, wo das Help Center zwischen den übrigen Seiten einer Produkt-Website steht. Sein nächster Nachbar ist die [Changelog Vorlage](https://wingo-ui.com/de/blog/changelog-page-template), die „Ist das schon behoben?“ beantwortet, bevor jemand ein Ticket öffnet.

## Wo fängst du an?

Öffne die [Help Center Page](https://wingo-ui.com/templates/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](https://wingo-ui.com/de/pricing)); wenn dir eine einzelne Support-Seite vorerst reicht, fang mit der kostenlosen FAQ Page an.

## Komponenten in diesem Artikel

- [Help Center Page](https://wingo-ui.com/templates/help-center-page) (Pro): A support home: live search with grouped, highlighted results, topic chips, category cards, popular articles, contact options and status. Installation: `npx wingo-ui@latest add help-center-page`
- [Help Article Page](https://wingo-ui.com/templates/help-article-page) (Pro): One support article: search, a topic sidebar, a Markdown body with steps and callouts, contents and helpful feedback. Installation: `npx wingo-ui@latest add help-article-page`
- [Global Search](https://wingo-ui.com/components/global-search) (Pro): A React global search bar for an app header: grouped results from every entity as you type, scopes, recents and suggestions, full screen on phones. Installation: `npx wingo-ui@latest add global-search`
- [FAQ Page](https://wingo-ui.com/templates/faq-page) (Free): A React FAQ page template: a big search, topic cards with counts, 21 answers in five categories, help options and a call to action. Installation: `npx wingo-ui@latest add faq-page`

## 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.

---

Quelle: https://wingo-ui.com/de/blog/help-center-template