Dashboard UI for React and Tailwind

Complete application screens in a sidebar frame, with a tab bar of their own on phones.

6 variants

Switch category

Complete app screens, ready to fill

A dashboard is where people spend their working day, so it has to be fast to scan. The six screens here are complete application views in a sidebar frame, with charts, tables and lists from the kit, and each one gets its own tab bar on phones.

Overview is the start screen with key numbers, a trend and recent items. Analytics goes deeper into charts with a date range. Kanban moves cards between columns by drag and by keyboard. CRM with detail sheet opens a record in a side panel without leaving the list, Activity feed shows what happened in a team, Finance lists accounts, transactions and a balance.

Put the one number people check every morning at the top left. Use the same date range for every chart on a screen. The screens take your data through props, connect them to your API and keep loading states, the kit has skeletons for each block.

Overview

KPIs with trends, a revenue chart with comparison and crosshair, channels, orders and goals.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="overview" sidebar={{ brand, items, user }} kpis={[…]} series={[…]} labels={[…]} … />

Source

Analytics

Pick a metric from the strip and the chart follows. Pages, sources and countries below.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="analytics" kpis={[{ label, value, delta, series }]} lists={[…]} … />

Source

Kanban

Columns with drag and drop, keyboard moves with Alt and the arrows, quick add. Phones swipe column by column.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="kanban" board={[{ id, title, cards: [{ id, title, tag, assignees, due }] }]} … />

Source

CRM with detail sheet

Pipeline bar, search and stages. A row opens a sheet from the side, on phones from the bottom.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="crm-list" stages={[…]} contacts={[{ name, company, stage, value, timeline }]} … />

Source

Activity feed

A timeline grouped by day with filters, quoted comments and who is online.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="activity-feed" activity={[{ who, action, target, time, day, kind, body }]} … />

Source

Finance

Balance across accounts, cash flow bars with tooltips, budgets that warn and transactions.

Installv1.0.2

aiw add @ai-website/dashboard

Brings along utils, kit, button, icon, sidebar

Usage

<Dashboard variant="finance" accounts={[…]} cashflow={[{ label, income, expenses }]} budgets={[…]} transactions={[…]} />

Source

Details

What Dashboard brings along, read from the registry and the source.

Area: App
Variants: 6
Version: 1.0.2 · since 1.0.0
File: components/ui/dashboard.tsx
Brings along: utilskitbutton icon sidebar
npm packages: None
Languages: English and German, 59 texts of its own
Studio: Adjust in code
In collections: App dashboard
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The DashboardProps interface from components/ui/dashboard.tsx, with the comments from the code.

variantoptional
DashboardVariant
overviewanalyticskanbancrm-listactivity-feedfinance
sidebarrequired
Omit<SidebarProps, 'children'>
The app frame: brand, navigation and user, see Sidebar
titlerequired
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']>

Built-in texts

Dashboard writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 59 texts

Key	English	German
vsPrev	English vs. previous period	German ggü. Vorperiode
range	English Time range	German Zeitraum
d7	English 7 days	German 7 Tage
d30	English 30 days	German 30 Tage
d90	English 90 days	German 90 Tage
showTable	English Show as table	German Als Tabelle zeigen
hideTable	English Show as chart	German Als Diagramm zeigen
chartHint	English Use the arrow keys to read each point.	German Mit den Pfeiltasten jeden Punkt ablesen.
recentOrders	English Recent orders	German Letzte Bestellungen
viewAll	English View all	German Alle ansehen
goals	English Goals this quarter	German Ziele dieses Quartal
of	English of	German von
pickMetric	English Pick a metric for the chart	German Kennzahl für das Diagramm wählen
addCard	English Add a card	German Karte hinzufügen
newCard	English Card title	German Titel der Karte
add	English Add	German Hinzufügen
moveHint	English Drag, or focus a card and use Alt with the left and right arrows to move it.	German Ziehen, oder eine Karte fokussieren und mit Alt und den Pfeiltasten links und rechts verschieben.
moved	English {card} moved to {column}	German {card} nach {column} verschoben
comments	English {n} comments	German {n} Kommentare
due	English Due {date}	German Fällig {date}
search	English Search contacts	German Kontakte suchen
all	English All	German Alle
deal	English Deal value	German Auftragswert
owner	English Owner	German Betreut von
last	English Last contact	German Letzter Kontakt
stage	English Stage	German Phase
contact	English Contact	German Kontakt
close	English Close	German Schließen
timeline	English Timeline	German Verlauf
note	English Note	German Notiz
email	English Write email	German E-Mail schreiben
call	English Call	German Anrufen
openContact	English Open {name}	German {name} öffnen
loadMore	English Show older activity	German Ältere Aktivität zeigen
online	English Online now	German Gerade online
thisWeek	English This week	German Diese Woche
balance	English Total balance	German Gesamtsaldo
accounts	English Accounts	German Konten
cashflow	English Cash flow	German Geldfluss
income	English Income	German Einnahmen
expenses	English Expenses	German Ausgaben
budgets	English Budgets	German Budgets
left	English {amount} left	German noch {amount}
over	English {amount} over budget	German {amount} über Budget
transactions	English Transactions	German Umsätze
noMatch	English No contact matches.	German Kein Kontakt passt.
priority	English Priority	German Priorität
total	English Total	German Gesamt
filter	English Filter	German Filter
share	English Share	German Anteil
high	English High	German Hoch
medium	English Medium	German Mittel
low	English Low	German Niedrig
undo	English Undo	German Rückgängig
loading	English Loading	German Wird geladen
moveNext	English Move {card} to the next column	German {card} in die nächste Spalte schieben
dropHere	English Drop here	German Hier ablegen
newEvents	English {n} new	German {n} neu
live	English Live	German Live

Read from the source of the component.

Dashboard handles the keys Escape, Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Tab and Space itself.
Sets aria-busy, aria-checked, aria-controls, aria-haspopup, aria-label, aria-labelledby, aria-live, aria-modal, aria-roledescription, aria-selected, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles dialog, img, meter, radio, radiogroup, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Dashboard?

With aiw add @ai-website/dashboard. The command puts components/ui/dashboard.tsx into your project, the code is yours from then on. It brings along button, icon and sidebar. It needs no further npm packages.

Which variants does Dashboard have?

6 variants, Overview, Analytics, Kanban, CRM with detail sheet, Activity feed and Finance. You pick one with the variant prop, for example variant="analytics".

Can I translate the texts of Dashboard?

Yes. Dashboard carries 59 texts of its own in English and German, such as “vs. previous period”, “Time range” and “7 days”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Dashboard?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Dashboard with aiw_components and install it with aiw_add @ai-website/dashboard. Name the variant in your prompt, for example variant="overview", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Dashboards on a page.

Complete app screens, ready to fill

Dashboard

Overview

Analytics

Kanban

CRM with detail sheet

Activity feed

Finance

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with