Zum Inhalt springen
UI Kit
Accent

Dashboards für React und Tailwind

Vollständige Anwendungsbildschirme im Seitenleisten-Rahmen, auf dem Telefon mit eigener Tab-Leiste.

6 Variants
Kategorie wechseln

Fertige App-Screens zum Befüllen

Im Dashboard verbringen Menschen ihren Arbeitstag, es muss sich also schnell erfassen lassen. Die sechs Screens hier sind vollständige Anwendungsansichten im Sidebar-Rahmen, mit Diagrammen, Tabellen und Listen aus dem Kit, und jede bekommt am Handy eine eigene Tab-Leiste.

Die Übersicht ist der Startscreen mit Kennzahlen, Verlauf und letzten Einträgen. „Analysen“ geht tiefer in Diagramme mit Zeitraum. Kanban verschiebt Karten zwischen Spalten, per Maus und per Tastatur. „CRM mit Detail-Panel“ öffnet einen Datensatz in einem Seitenpanel, ohne die Liste zu verlassen, „Aktivitäten“ zeigt, was im Team passiert ist, „Finanzen“ listet Konten, Buchungen und Saldo.

Setz die eine Zahl, die jeden Morgen geprüft wird, nach oben links. Nutze für alle Diagramme eines Screens denselben Zeitraum. Die Screens nehmen deine Daten über Props, verbinde sie mit deiner API und behalte Ladezustände, das Kit hat Skeletons für jeden Block.

Dashboard

Übersicht

Kennzahlen mit Verlauf, Umsatzdiagramm mit Vergleich und Fadenkreuz, Kanäle, Bestellungen und Ziele.

Analysen

Kennzahl aus der Leiste wählen, das Diagramm folgt. Darunter Seiten, Quellen und Länder.

Kanban

Spalten mit Ziehen und Ablegen, Verschieben mit Alt und Pfeiltasten, schnelles Hinzufügen. Telefone wischen Spalte für Spalte.

CRM mit Detail-Panel

Pipeline-Balken, Suche und Phasen. Eine Zeile öffnet ein Panel von der Seite, auf dem Telefon von unten.

Aktivitäten

Eine Zeitleiste nach Tagen mit Filtern, zitierten Kommentaren und wer gerade online ist.

Finanzen

Saldo über alle Konten, Geldfluss-Balken mit Tooltips, warnende Budgets und Umsätze.

Details

Was Dashboard mitbringt, aus Registry und Quellcode gelesen.

Bereich
App
Variants
6
Version
1.0.2 · seit 1.0.0
Datei
components/ui/dashboard.tsx
Bringt mit
utilskitbuttoniconsidebar
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 59 eigene Texte
Studio
Im Code anpassen
In Sammlungen
App-Dashboard
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle DashboardProps aus components/ui/dashboard.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    DashboardVariant

    overviewanalyticskanbancrm-listactivity-feedfinance

  • sidebarPflicht
    Omit<SidebarProps, 'children'>

    The app frame: brand, navigation and user, see Sidebar

  • titlePflicht
    string
  • subtitleoptional
    string
  • actionsoptional
    React.ReactNode

    Buttons next to the title

  • currencyoptional
    string
  • kpisoptional
    Kpi[]
  • seriesoptional
    Series[]
  • listsoptional
    { title: string; items: { label: string; value: number }[]; format?: Format }[]

    Ranked lists with a bar, e.g. channels, pages, sources

  • ordersoptional
    { id: string; customer: string; item: string; amount: number; status: string; tone: 'success' | 'warning' | 'neutral' }[]

    overview: recent orders

  • goalsoptional
    { label: string; value: number; target: number; format?: Format }[]

    overview: goals with progress

  • boardoptional
    { id: string; title: string; cards: BoardCard[] }[]

    kanban

  • contactsoptional
    Contact[]

    crm-list

  • stagesoptional
    string[]
  • activityoptional
    ActivityItem[]

    activity-feed

  • incomingoptional
    ActivityItem[]

    activity-feed: events that arrive while the page is open, offered behind a pill

  • filtersoptional
    { value: string; label: string }[]
  • onlineoptional
    string[]
  • accountsoptional
    { name: string; number: string; balance: number }[]

    finance

  • cashflowoptional
    { label: string; income: number; expenses: number }[]
  • budgetsoptional
    { label: string; spent: number; limit: number }[]
  • transactionsoptional
    { id: string; date: string; name: string; category: string; amount: number; icon?: IconName }[]
  • labelsTextoptional
    Partial<(typeof TEXTS)['en']>

Eingebaute Texte

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

Alle 59 Texte anzeigen
vsPrevEnglisch vs. previous periodDeutsch ggü. Vorperiode
rangeEnglisch Time rangeDeutsch Zeitraum
d7Englisch 7 daysDeutsch 7 Tage
d30Englisch 30 daysDeutsch 30 Tage
d90Englisch 90 daysDeutsch 90 Tage
showTableEnglisch Show as tableDeutsch Als Tabelle zeigen
hideTableEnglisch Show as chartDeutsch Als Diagramm zeigen
chartHintEnglisch Use the arrow keys to read each point.Deutsch Mit den Pfeiltasten jeden Punkt ablesen.
recentOrdersEnglisch Recent ordersDeutsch Letzte Bestellungen
viewAllEnglisch View allDeutsch Alle ansehen
goalsEnglisch Goals this quarterDeutsch Ziele dieses Quartal
ofEnglisch ofDeutsch von
pickMetricEnglisch Pick a metric for the chartDeutsch Kennzahl für das Diagramm wählen
addCardEnglisch Add a cardDeutsch Karte hinzufügen
newCardEnglisch Card titleDeutsch Titel der Karte
addEnglisch AddDeutsch Hinzufügen
moveHintEnglisch Drag, or focus a card and use Alt with the left and right arrows to move it.Deutsch Ziehen, oder eine Karte fokussieren und mit Alt und den Pfeiltasten links und rechts verschieben.
movedEnglisch {card} moved to {column}Deutsch {card} nach {column} verschoben
commentsEnglisch {n} commentsDeutsch {n} Kommentare
dueEnglisch Due {date}Deutsch Fällig {date}
searchEnglisch Search contactsDeutsch Kontakte suchen
allEnglisch AllDeutsch Alle
dealEnglisch Deal valueDeutsch Auftragswert
ownerEnglisch OwnerDeutsch Betreut von
lastEnglisch Last contactDeutsch Letzter Kontakt
stageEnglisch StageDeutsch Phase
contactEnglisch ContactDeutsch Kontakt
closeEnglisch CloseDeutsch Schließen
timelineEnglisch TimelineDeutsch Verlauf
noteEnglisch NoteDeutsch Notiz
emailEnglisch Write emailDeutsch E-Mail schreiben
callEnglisch CallDeutsch Anrufen
openContactEnglisch Open {name}Deutsch {name} öffnen
loadMoreEnglisch Show older activityDeutsch Ältere Aktivität zeigen
onlineEnglisch Online nowDeutsch Gerade online
thisWeekEnglisch This weekDeutsch Diese Woche
balanceEnglisch Total balanceDeutsch Gesamtsaldo
accountsEnglisch AccountsDeutsch Konten
cashflowEnglisch Cash flowDeutsch Geldfluss
incomeEnglisch IncomeDeutsch Einnahmen
expensesEnglisch ExpensesDeutsch Ausgaben
budgetsEnglisch BudgetsDeutsch Budgets
leftEnglisch {amount} leftDeutsch noch {amount}
overEnglisch {amount} over budgetDeutsch {amount} über Budget
transactionsEnglisch TransactionsDeutsch Umsätze
noMatchEnglisch No contact matches.Deutsch Kein Kontakt passt.
priorityEnglisch PriorityDeutsch Priorität
totalEnglisch TotalDeutsch Gesamt
filterEnglisch FilterDeutsch Filter
shareEnglisch ShareDeutsch Anteil
highEnglisch HighDeutsch Hoch
mediumEnglisch MediumDeutsch Mittel
lowEnglisch LowDeutsch Niedrig
undoEnglisch UndoDeutsch Rückgängig
loadingEnglisch LoadingDeutsch Wird geladen
moveNextEnglisch Move {card} to the next columnDeutsch {card} in die nächste Spalte schieben
dropHereEnglisch Drop hereDeutsch Hier ablegen
newEventsEnglisch {n} newDeutsch {n} neu
liveEnglisch LiveDeutsch Live

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Dashboard reagiert selbst auf die Tasten Escape, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende, Tab und Leertaste.
  • Setzt aria-busy, aria-checked, aria-controls, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-modal, aria-roledescription, aria-selected, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen dialog, img, meter, radio, radiogroup, status, tab, tablist und tabpanel.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Dashboard?

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

Welche Varianten hat Dashboard?

6 Varianten, Übersicht, Analysen, Kanban, CRM mit Detail-Panel, Aktivitäten und Finanzen. Du wählst sie mit der Prop variant, zum Beispiel variant="analytics".

Kann ich die Texte von Dashboard übersetzen?

Ja. Dashboard bringt 59 eigene Texte auf Deutsch und Englisch mit, etwa „ggü. Vorperiode“, „Zeitraum“ und „7 Tage“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Dashboard einbauen?

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

Ähnliche Components

Mehr aus App, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Dashboards stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert