Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Dashboard

Full dashboards composed from Stat Cards, Charts, DataTable and Core parts, on a grid that reflows by its own width, with a period toolbar for presets, a custom range and comparison.

Blocks@gaudi/design-system/blocks/DashboardView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Dashboard from '@gaudi/design-system/blocks/Dashboard';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/dashboard-agent-analytics.json.

Usage

import { DashboardGrid, DashboardPanel } from '@gaudi/design-system/blocks/Dashboard';
<DashboardGrid label='Overview'>  <DashboardPanel title='Traffic' span={8}>{trafficChart}</DashboardPanel>  <DashboardPanel title='Sources' span={4}>{sourceList}</DashboardPanel></DashboardGrid>

Examples

AI agents · Conversation analytics

Storybook

Commerce · Revenue

Storybook

Creators · Payouts

Storybook

Project · Delivery timesheet

Storybook

Security · Edge telemetry

Storybook

Field teams · Coverage

Storybook

Content · Newsletter analytics

Storybook

Operations · Capacity and exceptions

Storybook

API

17 props

Accessibility

The grid and each panel are named regions; panel titles are headings. Scrolling panel bodies take focus so the keyboard can scroll them. The toolbar presets are a single-choice group, the calendar opens in a popover, and the active range is announced politely.

DataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examplesTabsSwitch between related panels with keyboard-accessible tab controls.3 examplesPillPill renders compact category and status labels.4 examplesStat CardsMetric cards on the Core Card: a label, value and change badge with optional icon tile, actions, description, footer and a segmented meter.9 examplesTableSemantic article tables with contained horizontal scrolling.7 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examples