Dashboard-Design-Skill

Dashboard-Design

Regeln

• Seitenleiste + Hauptinhalts-Layout: fixe Seitenleiste (w-64), fluider Hauptbereich mit Abständen
• Seitenleisten-Navigation: Icon + Label-Links, aktiver Zustand hervorgehoben, auf Mobilgeräten einklappbar
• KPI-Kartenzeile oben: 3-4 Karten in einem responsiven Raster – Metrikname, Wert, Trend (Auf-/Abwärts %), Sparkline optional
• Datentabellen: sortierbare Spalten, filterbar nach Suche/Status, paginiert (10-25 Zeilen Standard)
• Verwende @tanstack/react-table für die headless Tabellenlogik – kombiniere mit shadcn/ui Table-Komponenten
• Responsiv: Seitenleiste kollabiert bei md-Breakpoint zu einem Hamburger-Menü, Karten stapeln sich auf 1-2 Spalten
• Ladezustände: Skelett-Platzhalter passend zu Karten-/Tabellenformen – niemals Layoutverschiebung
• Datumsbereichs-Wähler zum Filtern von Dashboard-Daten – Standard: letzte 30 Tage

Layout-Struktur

┌──────────┬────────────────────────────┐
│ Seiten-  │  Kopfzeile / Breadcrumbs   │
│ leiste   ├────────────────────────────┤
│          │  KPI-Karten (3-4 Raster)   │
│ Navi-    ├────────────────────────────┤
│ gations- │  Diagramme / Grafiken      │
│ links    ├────────────────────────────┤
│          │  Datentabelle              │
└──────────┴────────────────────────────┘

Muster

// KPI-Karte
function KPICard({ title, value, change }: { title: string; value: string; change: number }) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <p className={cn("text-xs", change >= 0 ? "text-green-600" : "text-red-600")}>
          {change >= 0 ? "+" : ""}{change}% gegenüber Vorperiode
        </p>
      </CardContent>
    </Card>
  );
}

Zu vermeiden

• Fester Hauptinhalt – immer fluides Layout verwenden, das den verfügbaren Platz ausfüllt
• Tabellen ohne Paginierung – große Datensätze beeinträchtigen Leistung und Benutzerfreundlichkeit
• Fehlende Lade-/Leerzustände – immer Skelette oder „Keine Daten“-Meldung anzeigen
• Seitenleiste, die nicht eingeklappt werden kann – mobile Nutzer benötigen die volle Viewport-Breite
• Lade-Spinner für partielle Seitenaktualisierungen – Skelette für bestimmte Bereiche verwenden
• Zu viele KPIs – 3-5 kritische Metriken hervorheben, den Rest in ausklappbaren Bereichen platzieren
• Eigene Seitenleiste von Grund auf neu – die Seitenleisten-Komponente von shadcn verwenden
• Leere Zustände ohne Aktionen – immer einen Call-to-Action einfügen („Noch keine Kampagnen. Erstelle deine erste →“)