C. Data & Tables

Charts

KPI overviews, a gallery of every chart type, period comparison, filtered reports and drill-down breakdowns — all on the library's chart components.

5 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add data/charts

01Analytics overview with KPIs

Uses: AppFrame · StatCard · AreaChart · ColumnChart · PieChart

components/blocks/data/charts/01-analytics-overview.tsx

Uses: AreaChart · LineChart · BarChart · PieChart · RadialChart · RadarChart · FunnelChart

components/blocks/data/charts/02-chart-gallery.tsx

Uses: AppFrame · LineChart · Segment · Badge · Table

components/blocks/data/charts/03-period-comparison.tsx

Uses: AppFrame · AreaChart · Checkbox · Badge · Button

components/blocks/data/charts/04-report-filters.tsx

Uses: AppFrame · Breadcrumb · BarChart · PieChart · Table

components/blocks/data/charts/05-breakdown-drilldown.tsx