Die beste React Dashboard Library 2026: 7 im Vergleich

Wer die beste React Dashboard Library sucht, muss vier Teile bewerten, denn aus genau diesen besteht jedes Dashboard: eine Datentabelle mit Sortierung und Filtern, Charts und KPI-Karten, die Filter, die beides steuern, und die App Shell drumherum (Sidebar, Top Bar, das Menü auf dem Smartphone). Am meisten entscheidet die Tabelle, denn Grouping, Pivoting und Export sind die Funktionen, die hinter bezahlten Plänen liegen. Wir haben am 16. Oktober 2026 Doku, Preisseiten und npm-Releases von sieben Bibliotheken gelesen und sie anhand dieser vier Teile verglichen.

Wir bauen Wingo UI, eine der sieben. Lies diesen Artikel also als Vergleich eines Anbieters, mit Quellen belegt. Wo eine andere Bibliothek die bessere Wahl ist, sagen wir das. Weitere direkte Vergleiche findest du unter Vergleiche und Alternativen, und unser Guide zu shadcn-Alternativen vergleicht Lizenzen, Preise und MCP-Support von 14 Bibliotheken.

Welche React Dashboard Library ist die beste?

Das hängt von der Tabelle ab. Wähl die Bibliothek, deren Datentabelle zu deinen Daten passt, und prüf danach, ob Charts und Shell auch passen.

• Enterprise-Grids mit Row Grouping, Pivoting, Excel-Export und sehr großen Datenmengen: AG Grid Enterprise, oder MUI X Premium, wenn die App schon Material UI nutzt.
• Ein kostenloses Dashboard mit dem Quellcode in deinem Repository: shadcn/ui und sein Block dashboard-01. Die Blocks von Tremor sind ebenfalls kostenlos, mit einem Vorbehalt zur Pflege weiter unten.
• Ein kostenloses Paket, in dem alles drin ist: Mantine, oder Ant Design für dichte Admin-Konsolen mit einer Tabelle, die Sortierung, Filter und Virtualisierung direkt mitbringt.
• Ein Dashboard, das Leute auch auf dem Smartphone öffnen, gebaut mit Tailwind CSS: Wingo UI. Unter 768px wird die Tabelle zu Karten, die Filter öffnen sich als Bottom Sheets und die Sidebar wird zum Drawer.
• Eine App, die ein KI-Agent für dich baut: shadcn/ui, wenn du den vertrautesten Code willst, Wingo UI, wenn der Agent eine Tabellenkomponente konfigurieren soll, statt selbst eine zu schreiben.

Wie haben wir die Bibliotheken verglichen?

Für jede Bibliothek haben wir die offizielle Doku zu Tabelle, Charts und Layout gelesen, die Preisseite, falls es eine gibt, und am 16. Oktober 2026 das jeweils neueste npm-Release. Benchmarks haben wir keine gemacht, dieser Artikel behauptet also nichts über die Geschwindigkeit irgendeines Grids. Die React Dashboard Komponenten, die wir uns angesehen haben, sind die, die ein typischer SaaS- oder Backoffice-Screen braucht: eine Tabelle, KPI-Karten, ein Zeitreihen-Chart, Filter und die Shell. Die Preise stehen in USD, so wie der jeweilige Anbieter sie auf seiner Website nennt. Zwei der sieben sind keine vollständigen UI-Bibliotheken: AG Grid ist ein Grid und eine Chart-Bibliothek, die du mit etwas anderem kombinierst, und Tremor konzentriert sich auf Charts und Dashboard-Blocks.

Wie schneiden die Dashboard-Bibliotheken im Vergleich ab?

Bei den Tabellenfunktionen führen die bezahlten Grids, beim eigenen Code die Copy-Paste-Bibliotheken, und die kostenlosen Pakete liegen dazwischen. Stand der Tabelle: 16. Oktober 2026.

Welche Bibliothek hat die beste Datentabelle für ein Dashboard?

AG Grid Enterprise und MUI X Premium haben die meisten Tabellenfunktionen, AG Grid Community und Ant Design bieten am meisten in einem kostenlosen Paket, und Wingo UI bietet am meisten in einer Tabelle, die dir als Quellcode gehört. Am deutlichsten wird der Unterschied bei drei Funktionen.

Wenn deine Nutzer jeden Montag nach Region gruppieren, nach Quartal pivotieren und nach Excel exportieren, dann zahl für AG Grid oder MUI X. TanStack Table hat APIs für Grouping und Aggregation, aber die gruppierten Zeilen, die Pivot-Oberfläche und einen Excel-Writer musst du selbst bauen und pflegen. Die Tabelle von Wingo UI kann keine dieser drei Funktionen: Sie hat Summen in der Fußzeile (sum, avg, count, min, max) und Bulk Actions, an die du deinen eigenen Export hängen kannst, mehr nicht.

Die meisten Dashboards brauchen weniger: Suche, Spaltenfilter, Sortierung, Zeilenauswahl mit Bulk Actions, ein gespeichertes Spaltenlayout und sinnvolle Ladezustände. shadcn/ui liefert dir einen Guide, wie du das auf TanStack Table baust, mit Sortierung, Filtern, Spaltensichtbarkeit, Zeilenauswahl und Paginierung; Pinning, Virtualisierung und Layouts fürs Smartphone baust du selbst. Die Data Table von Wingo UI liefert all das als Props einer einzigen Komponente, gebaut auf TanStack Table v9:

"use client";

import { Download, Mail, Plus } from "lucide-react";
import { DataTable, createColumns } from "@/components/ui/data-table";

type Client = {
  id: string;
  name: string;
  city: string;
  status: string;
  balance: number;
  lastInvoice: string | null;
};

const col = createColumns<Client>();
const columns = col([
  col.accessor("name", { header: "Kunde", filter: "text" }),
  col.accessor("city", { header: "Stadt", filter: "multi-select" }),
  col.accessor("status", {
    header: "Status",
    type: "badge",
    badge: { Aktiv: { tone: "success" }, Überfällig: { tone: "danger" }, Interessent: { tone: "info" } },
    filter: "multi-select",
  }),
  col.accessor("balance", { header: "Saldo", type: "currency", footer: "sum", filter: "number-range" }),
  col.accessor("lastInvoice", { header: "Letzte Rechnung", type: "relative" }),
]);

export function ClientsTable({ clients }: { clients: Client[] }) {
  return (
    <DataTable
      data={clients}
      columns={columns}
      caption="Kunden"
      locale="en-US"
      selectionMode="multiple"
      searchPlaceholder="Kunden suchen"
      quickFilters={[{ id: "overdue", label: "Überfällig", columnFilter: { id: "status", value: ["Überfällig"] } }]}
      toolbarActions={[{ label: "Neuer Kunde", icon: <Plus />, primary: true }]}
      bulkActions={(rows) => [
        { label: "E-Mail senden", icon: <Mail /> },
        { label: "Exportieren", icon: <Download />, onSelect: () => console.log(rows) },
      ]}
      persistKey="clients"
    />
  );
}

persistKey merkt sich Spaltensichtbarkeit, Reihenfolge, Breiten, Dichte und Seitengröße im Local Storage. Bei mehr als 200 gerenderten Zeilen virtualisiert die Tabelle von selbst. Unter 768px wird jede Zeile zu einer Karte: Langes Drücken startet die Auswahl, die Leiste für Bulk Actions schwebt unten, und die Menüs für Sortierung, Filter und Zeilen öffnen sich als Bottom Sheets. Unser Guide zur Datentabelle mit TanStack Table v9 geht dieselbe Komponente Spalte für Spalte durch.

Wie sollten Filter in einem React Dashboard funktionieren?

Filter gehören in die URL oder auf den Server, sobald die Daten zu groß für den Browser werden, und die Tabelle sollte dir ein einziges Query-Objekt geben statt fünf Callbacks. In AG Grid Community übergibt das Infinite Row Model Sortierung und Filter an deinen Server, das Server-Side Row Model mit Grouping gibt es nur in Enterprise. MUI X und Ant Design nehmen Sortierung, Filter und Seite als kontrollierten State an. Bei einem Eigenbau mit shadcn/ui verdrahtest du den State von TanStack Table selbst mit deinem Fetch.

In Wingo UI sorgt mode="server" dafür, dass die Tabelle nicht mehr lokal filtert und jede Änderung als { page, pageSize, sorting, globalFilter, columnFilters } an onQueryChange schickt, die Suche mit 300ms Debounce. Ein Stolperstein: Die erste Query meldet die Tabelle nicht, weil sie davon ausgeht, dass du Seite eins schon gerendert hast. Starte also selbst mit dieser Query, sonst läuft der erste Fetch nie:

"use client";

import { useEffect, useState } from "react";
import { DataTable, type DataTableColumn, type DataTableQuery } from "@/components/ui/data-table";

type Order = { id: string; customer: string; total: number; createdAt: string };
type OrdersPage = { rows: Order[]; total: number };

const columns: DataTableColumn<Order>[] = [
  { id: "customer", header: "Kunde", filter: "text" },
  { id: "total", header: "Summe", type: "currency", filter: "number-range" },
  { id: "createdAt", header: "Datum", type: "date", filter: "date-range" },
];

// entspricht den Defaults der Tabelle: Seite 1, 25 Zeilen, keine Sortierung, keine Filter
const FIRST_QUERY: DataTableQuery = { page: 1, pageSize: 25, sorting: [], globalFilter: "", columnFilters: [] };

export function OrdersTable() {
  const [query, setQuery] = useState<DataTableQuery>(FIRST_QUERY);
  const [result, setResult] = useState<OrdersPage | null>(null);
  const [fetching, setFetching] = useState(true);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    // eine neuere Query bricht den älteren Request ab, damit eine langsame Antwort nie eine frische überschreibt
    const controller = new AbortController();
    fetch("/api/orders", { method: "POST", body: JSON.stringify(query), signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(String(res.status));
        return res.json() as Promise<OrdersPage>;
      })
      .then((data) => {
        setResult(data);
        setFailed(false);
        setFetching(false);
      })
      .catch((err: unknown) => {
        if (err instanceof DOMException && err.name === "AbortError") return;
        setFailed(true);
        setFetching(false);
      });
    return () => controller.abort();
  }, [query]);

  const load = (next: DataTableQuery) => {
    setFetching(true);
    setQuery(next);
  };

  return (
    <DataTable
      mode="server"
      data={result?.rows ?? []}
      rowCount={result?.total ?? 0}
      columns={columns}
      caption="Bestellungen"
      onQueryChange={load}
      loading={fetching && !result}
      refreshing={fetching && Boolean(result)}
      error={failed ? "Die Bestellungen konnten nicht geladen werden." : undefined}
      onRetry={() => load({ ...query })}
    />
  );
}

loading zeichnet Skeleton-Zeilen nur beim ersten Laden. Danach lässt refreshing die aktuellen Zeilen unter einem dünnen Fortschrittsbalken stehen, damit die Tabelle nicht bei jeder Sortierung leer aufblitzt.

Für Filter über mehr als eine Spalte, etwa „Status ist überfällig und Saldo über 5.000 $, oder Stadt ist Austin“, ergänzt der Filter Builder Bedingungs-Chips, UND- und ODER-Gruppen und gespeicherte Ansichten und öffnet sich auf Smartphones als ein einziges Bottom Sheet. Der Datumsbereichsfilter nutzt denselben Date Range Picker, der auf dem Desktop zwei Monate mit Presets zeigt und auf dem Smartphone ein Sheet mit einem Monat.

Welche Bibliotheken liefern die Charts und KPI-Karten, die ein Dashboard braucht?

Jede Bibliothek hier hat ein eigenes Chart-Paket, und drei davon nutzen unter der Haube Recharts. shadcn/ui, Mantine und Tremor bauen auf Recharts, ein Wechsel zwischen ihnen ändert also vor allem das Styling. MUI X Charts, AntV und AG Charts sind eigene Engines. Wingo UI zeichnet seine Charts als SVG mit d3-scale und d3-shape und animiert sie mit motion, ohne Recharts.

KPI-Karten lassen die Bibliotheken am häufigsten weg. Die Blocks-Website von Tremor listet 29 KPI-Card-Blocks, der Dashboard-Block von shadcn/ui enthält Section Cards, und bei den übrigen baust du die Karte selbst. Die Stat Card ist die von Wingo UI: eine Zahl, die einmal hochzählt, wenn die Karte ins Bild scrollt, eine Delta-Pille, deren Farbe die Bedeutung zeigt (mit invertTrend erscheinen sinkende Kosten grün), eine Sparkline und ein Zielbalken. Screenreader hören einen einzigen Satz mit dem Endwert, nie die Zahlen dazwischen.

Das Snippet beginnt mit "use client", weil formatDelta eine Funktion ist und eine Server Component keine Funktion als Prop an eine Client Component übergeben kann.

"use client";

import { Clock, FileText, UserPlus, Wallet } from "lucide-react";
import { StatCard, StatGroup } from "@/components/ui/stat-card";

export function DashboardKpis({ daily }: { daily: number[] }) {
  return (
    <StatGroup variant="joined">
      <StatCard
        label="Umsatz"
        icon={<Wallet />}
        value={128450}
        format="currency"
        delta={12.4}
        deltaLabel="ggü. Vormonat"
        sparkline={daily}
        goal={190000}
        locale="en-US"
      />
      <StatCard label="Ausgestellte Rechnungen" icon={<FileText />} value={342} delta={8} deltaFormat="number" locale="en-US" />
      <StatCard label="Neue Kunden" icon={<UserPlus />} value={27} delta={-3.1} locale="en-US" />
      <StatCard
        label="Durchschnittliche Zahlungsdauer"
        icon={<Clock />}
        value={18 * 86400}
        format="duration"
        delta={-2.5}
        formatDelta={(d) => `${d.toLocaleString("en-US")} Tage`}
        invertTrend
        locale="en-US"
      />
    </StatGroup>
  );
}

StatGroup legt die Kacheln auf breiten Bildschirmen zu viert nebeneinander und auf Smartphones zu zweit, und startet ihr Hochzählen jeweils 60ms versetzt.

Der Area Chart deckt das Panel „Umsatz über die Zeit“ ab, das die meisten Dashboards haben: überlappende Flächen, gestapelte Bänder oder 100-Prozent-Anteile, eine Fadenkreuz-Anzeige, Legendeneinträge, die eine Serie ausblenden, und volle Tastaturbedienung. Auf dem Smartphone pinnt ein Tipp die Anzeige über deinem Finger, und mit seitlichem Ziehen fährst du durch die Monate, während vertikales Ziehen weiter die Seite scrollt.

import { AreaChart } from "@/components/ui/area-chart";

const data = [
  { month: "2026-07", direct: 41460, online: 28700, partners: 18070 },
  { month: "2026-08", direct: 38030, online: 27300, partners: 15600 },
  { month: "2026-09", direct: 48920, online: 36400, partners: 22130 },
];

export function RevenueByChannel() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      series={[
        { key: "direct", label: "Direktvertrieb" },
        { key: "online", label: "Onlineshop" },
        { key: "partners", label: "Partner" },
      ]}
      type="stacked"
      valueFormat="currency"
      currency="USD"
      label="Umsatz nach Kanal, 2026"
    />
  );
}

Wenn du Candlesticks, Sankey-Diagramme oder Treemaps brauchst: Das Chart-Paket von Mantine hat sie, Wingo UI nicht.

Was sollte die App Shell um ein Dashboard leisten?

Sie sollte die Sidebar auf dem Desktop einklappen, sich diese Wahl merken und auf dem Smartphone zu etwas werden, das man mit dem Daumen bedient. Hier liegen die Bibliotheken näher beieinander als bei den Tabellen. Die Sidebar von shadcn/ui klappt zu Icons ein oder gleitet aus dem Bild, hat die Varianten sidebar, floating und inset, schaltet mit Cmd oder Strg+B um, speichert ihren Zustand in einem Cookie sidebar_state und öffnet sich auf Smartphones als Sheet. Die AppShell von Mantine positioniert Header, Navbar, Aside und Footer, mit getrennten eingeklappten Zuständen für Desktop und Mobil, und die Navigation lieferst du selbst. Bei MUI ist die Option das DashboardLayout von Toolpad Core, dessen Sidebar sich zu einem Mini-Drawer einklappt; sein neuestes Release, 0.16.0, stammt aus dem Juni 2025. Ant Design hat ein Layout mit einklappbarem Sider und in Pro Components das ProLayout.

Die App Shell von Wingo UI folgt demselben Modell (Icon-Rail oder Offcanvas, drei Varianten, Mod+B, ein Cookie, das das Server-Layout liest, damit schon der erste Paint die richtige Breite hat) und ergänzt zwei Dinge. Mit resizable lässt sich der Rand der Sidebar zwischen 200 und 400px ziehen und rastet unter 120px als Rail ein. Auf Smartphones bekommst du neben dem Drawer eine Tab-Leiste unten aus dem Prop tabs, und der Drawer schließt sich bei Navigation, bei Escape oder wenn du ihn zurückwischst.

import type { ReactNode } from "react";
import { cookies } from "next/headers";
import { FileText, House, LayoutDashboard, Settings, Users } from "lucide-react";
import { AppShell } from "@/components/ui/app-shell";
import { Sidebar, type SidebarNavGroup } from "@/components/ui/sidebar";
import { Topbar } from "@/components/ui/topbar";
import { persistedCookieName } from "@/hooks/use-persisted-state";
import type { NavItem } from "@/lib/navigation";

const nav: SidebarNavGroup[] = [
  { items: [{ label: "Dashboard", href: "/", icon: <LayoutDashboard /> }] },
  {
    label: "Vertrieb",
    items: [
      { label: "Kunden", href: "/clients", icon: <Users /> },
      { label: "Rechnungen", href: "/invoices", icon: <FileText /> },
    ],
  },
  { label: "Konto", items: [{ label: "Einstellungen", href: "/settings", icon: <Settings /> }] },
];

const tabs: NavItem[] = [
  { label: "Start", href: "/", icon: <House /> },
  { label: "Kunden", href: "/clients", icon: <Users /> },
  { label: "Einstellungen", href: "/settings", icon: <Settings /> },
];

// app/(app)/layout.tsx, eine Server Component
export default async function AppLayout({ children }: { children: ReactNode }) {
  const stored = (await cookies()).get(persistedCookieName("app-shell-collapsed"))?.value;
  return (
    <AppShell
      defaultCollapsed={stored === "true"}
      sidebar={<Sidebar groups={nav} filter />}
      topbar={<Topbar title="Summit CRM" />}
      tabs={tabs}
      resizable
    >
      {children}
    </AppShell>
  );
}

Unser Tutorial für ein Next.js Admin Dashboard baut fünf Screens in dieser Shell, inklusive des LinkProvider, der die Sidebar über next/link routet.

Welche Bibliothek passt zu Enterprise-, Indie- und KI-gebauten Apps?

Enterprise-Dashboards

Nimm AG Grid oder MUI X, wenn das Grid das Produkt ist: Finanzen, Logistik, Operations-Tools, in denen Nutzer den ganzen Tag gruppieren, pivotieren und exportieren. AG Grid Enterprise kostet 999 $ pro Entwickler mit unbefristeter Lizenz und einem Jahr Updates, und das Bundle für 1.498 $ ergänzt AG Charts Enterprise. MUI X Pro kostet 299 $ und Premium 599 $ pro Entwickler und Jahr und passt zu einem Team, das schon mit Material UI arbeitet. Ohne Budget startest du mit AG Grid Community, das seine API mit Enterprise teilt, sodass du später upgraden kannst, oder mit Ant Design für dichte interne Konsolen mit einem vollen Komponentensatz rund um die Tabelle. Für diesen Fall passt Wingo UI schlechter: kein Row Grouping, kein Pivoting und kein Excel-Export.

Dashboards für Indies und kleine Teams

Fang kostenlos an. Wer React Dashboard Komponenten kostenlos und ohne Lizenzgebühr sucht, bekommt mit dem Block dashboard-01 von shadcn/ui eine Sidebar, Charts, eine Tabelle und KPI-Karten über ein einziges npx shadcn add, und jede Zeile gehört dir. Die über 300 Blocks von Tremor wurden kostenlos, als Vercel es im Januar 2025 übernommen hat, aber das npm-Paket hat seitdem kein Release bekommen. Behandle es also eher als Quelle für kopierbare Layouts denn als Abhängigkeit. Mantine ist die kostenlose Option, wenn du ein Paket mit Formularen, Datumsfeldern und Charts an einem Ort willst. Nimm Wingo UI, wenn deine Kunden das Dashboard auf dem Smartphone aufrufen, denn Tabelle, Filter, Charts und Shell kommen schon mit einem 390px-Bildschirm zurecht.

Dashboards, die KI-Agenten bauen

Agenten schreiben den meisten Code dort, wo die Bibliothek ihnen ein Rezept statt einer Komponente gibt. shadcn/ui ist die vertrauteste Wahl: v0 baut darauf auf, und shadcn veröffentlicht einen MCP-Server. Eine Datentabelle nach seinem Guide bedeutet trotzdem, dass ein Agent für jede Tabelle eine Spaltendefinition, eine Toolbar, einen Pager und die Verdrahtung mit TanStack schreibt. Mit Wingo UI schreibt der Agent eine Spaltenliste und Props, und der MCP-Server von Wingo UI gibt ihm search_components, get_component (Props, Defaults, Verwendung, Installationsbefehl) und check_updates für installierte Dateien. AG Grid veröffentlicht einen MCP-Server für seine Doku, und MUI und Mantine haben ebenfalls Server. Unser Vergleich shadcn vs MUI geht genauer darauf ein, welches der beiden großen Ökosysteme zu einem Workflow mit Agenten passt.

Wo solltest du anfangen?

Fang mit der Tabelle an, denn sie bestimmt den Rest. Wenn dein Dashboard Grouping, Pivoting oder Excel-Export braucht, teste AG Grid Enterprise (30 Tage, ohne Wasserzeichen) oder MUI X Premium, bevor du ein Layout schreibst. Wenn nicht, installier eine Tabelle von Wingo UI und öffne sie auf deinem Smartphone: npx wingo-ui@latest add data-table. Data Table, Stat Card, Area Chart und App Shell gehören zu Wingo UI Pro; Card, Badge, Tabs, Select, Progress und Skeleton, neben denen sie stehen, sind kostenlos. Egal, für welche React UI Bibliothek du dich beim Dashboard entscheidest: Lies die Doku ihrer Tabelle vor ihrer Landingpage.

Häufige Fragen

Was ist die beste kostenlose React Dashboard Library?

shadcn/ui, wenn du den Quellcode in deinem Repository haben willst: Der kostenlose Block dashboard-01 kombiniert eine Sidebar, einen Area Chart, eine Datentabelle und KPI-Karten. Mantine, wenn du lieber ein Paket installierst: Es steht unter MIT-Lizenz, bringt eine AppShell und 22 Chart-Komponenten mit, und das Community-Paket mantine-datatable ergänzt eine Datentabelle.

Ist das MUI X Data Grid kostenlos?

Das MIT-DataGrid ist kostenlos, zeigt aber höchstens 100 Zeilen pro Seite, und die Paginierung lässt sich nicht abschalten. Stand Oktober 2026 braucht Column Pinning den Pro-Plan für 299 $ pro Entwickler und Jahr, Row Grouping und Excel-Export brauchen Premium für 599 $.

Wird Tremor noch gepflegt?

Vercel hat Tremor im Januar 2025 übernommen und die über 300 Blocks kostenlos und Open Source gemacht. Das neueste Release des Pakets @tremor/react ist aber immer noch 3.18.7 vom 13. Januar 2025. Prüf also die letzte Aktivität im Repository, bevor du ein neues Dashboard darauf baust.

Welche React Dashboard Library funktioniert am besten mit KI-Agenten?

shadcn/ui kennen die meisten Agenten schon, und shadcn veröffentlicht einen eigenen MCP-Server. Der MCP-Server von Wingo UI liefert Props und Installationsbefehl jeder Komponente, und weil die Datentabelle eine einzige Komponente mit Props ist, schreibt ein Agent eine Spaltenliste statt einer ganzen Tabelle. AG Grid, MUI und Mantine veröffentlichen ebenfalls MCP-Server für ihre Doku.

Kann ein React Dashboard auf dem Smartphone gut funktionieren?

Ja, wenn die Tabelle zu Karten wird und die Sidebar zu einem Drawer. Die DataTable von Wingo UI rendert unter 768px eine Karte pro Zeile, und ihre AppShell ersetzt die Sidebar durch einen Drawer und eine Tab-Leiste unten. Die Sidebar von shadcn/ui wird auf Smartphones ebenfalls zum Sheet, aber keine der anderen Tabellen hier macht die Zeilen von selbst zu Karten.