Roadmap
MetricUI is building toward 1.0 — a stable, complete, and beautifully polished React dashboard library. Here is where we are and where we are going.
The Foundation
26 components, format engine, 8 theme presets, MCP server, full docs site. Everything you need to build a production dashboard today.
- KPI cards — sparklines, goal tracking, conditional coloring, and drill-downs
- 11 chart types — Area, Line, Bar, Donut, Gauge, HeatMap, Funnel, Waterfall, Bullet, Bar+Line, Sparkline
- Format engine — currency, percent, duration, compact — with locale support
- Filter system — PeriodSelector, DropdownFilter, SegmentToggle, FilterTags
- MetricGrid — auto-layout, drop components in, zero CSS needed
- Data states — loading skeletons, empty states, error boundaries, stale indicators
- Theming — 8 presets, dark mode, dense mode, CSS variable theming
- MCP server — 13 tools so AI builds correct dashboards on the first try
- 185+ tests, interactive docs, llms.txt for AI tools
Dashboards That React
Click a bar in one chart and every other component on the page responds. Cross-filtering, linked hover, value flash, and a CLI that gets you from install to dashboard in 60 seconds.
- CrossFilterProvider — signal-only click filtering with useCrossFilter and useCrossFilteredData hooks
- LinkedHoverProvider — synced crosshairs and tooltips across charts, zero config
- useValueFlash — opt-in highlight animation when data changes in real time
- npx metricui init — detects framework, configures AI tools, scaffolds a starter dashboard
- crossFilter prop on all categorical charts — BarChart, DonutChart, AreaChart, HeatMap, Funnel, Waterfall, BarLineChart, DataTable
- Stable donut colors — filtering won't change a slice's color
- Fully interactive demos — every filter on every demo page actually works
The Dashboard That Ships
Everything that turns a prototype into a product. FilterBar, DrillDown, Export, CardShell unification, tooltip hints, sticky filters, and reactive drill content.
- DrillDown — slide-over and modal panels with nested breadcrumbs, up to 4 levels deep
- FilterBar — collapsible container with auto-tags, badge count, sticky frosted-glass mode
- Export — PNG (4x DPI), CSV with filter metadata, clipboard copy via ExportButton
- CardShell — unified card wrapper for all components (KPI, charts, tables, status)
- Tooltip action hints — auto 'Click to drill down' / 'Click to filter' on interactive charts
- Auto empty states — components detect empty data and show filter-aware messages
- Reactive drill content — live-updating drill panels for streaming data dashboards
The DX Release
Developer experience. 5 providers → 1 component, zero type casts, smart column inference, tab navigation, filter convenience hooks.
- Dashboard — 5 nested providers replaced by one component with flat props
- DataTable — zero type casts, smart column inference, auto-detect numbers/dates/badges
- DashboardNav — tab and scroll navigation with FilterBar.Nav slot
- Filter convenience hooks — useFilterValue, useHasComparison, useActiveFilterCount
- MetricGrid fragment flattening — auto-layout works through React fragment wrappers
- Analytics demo — GA-style dashboard with 4 tab views and per-device filtering
The Intelligence Layer
Bring-your-own-LLM dashboard analysis. A floating chat that reads your live data, understands your business context, and answers questions about your metrics. Works with any model.
- DashboardInsight — floating chat button + slide-over sidebar with streaming AI responses
- Auto data collection — every component registers live data, updates when filters change
- Three-level context — company, dashboard, and per-component aiContext for smarter analysis
- @ mentions — reference specific charts in questions, keyboard navigation, multiple mentions
- Per-card sparkle icon — hover any card, click to open AI chat scoped to that metric
- Works with any LLM — OpenAI, Anthropic, local models. You bring the API key, we handle the UX
The Chart Expansion
7 new chart types with bundled map features. 18 charts total covering every analytics use case from scatter plots to geographic maps. Alpha-3 country codes and 2-letter state abbreviations — no numeric IDs to look up.
- ScatterPlot — correlation analysis with reference lines, linked hover, and bubble sizing
- Treemap — hierarchical breakdowns with flat or nested data, 5 tiling algorithms
- Calendar — GitHub-style contribution heatmap with auto date range detection
- Radar — multi-dimensional comparison with overlay support
- Sankey — flow visualization with gradient links, flat row or native format
- Choropleth — geographic heatmap with sqrt/log scale, tooltipLabel, country name resolution
- Bump — ranking chart with auto-ranking from flat data
- Bundled worldFeatures (alpha-3 codes) and usStatesFeatures (2-letter abbreviations)
- Granularity toggle cookbook recipe
The Polish
Saved views, DRY architecture, accessibility, and doc site infrastructure. The release that turned a feature-complete library into a well-engineered one.
- useDashboardState — serialize/restore dashboard state for shareable links and saved views
- useComponentInteraction — centralized drill-down/cross-filter/linked-hover logic across all 14 charts
- 6 shared doc components — eliminated 1,400+ lines of boilerplate across 46+ pages
- Accessibility — ARIA roles on SegmentToggle, screen reader announcements, icon button labels
- useDropdown hook — shared keyboard navigation + ARIA for all dropdown components
- 42 components in MCP knowledge base, all doc pages standardized
- Fixed-position TOC with accent bar active indicator
Rock Solid
Nothing new, everything better. Full keyboard navigation, color-blind safe mode, performance benchmarks, API consistency, edge case testing. This is when MetricUI earns "production-ready."
- Wire useDropdown into DropdownFilter, PeriodSelector, ExportButton — full keyboard nav
- Focus traps on DashboardInsight sidebar and DrillDownPanel
- Chart aria-labels — every chart gets role="img" with auto-generated description
- API consistency — modern drillDown on Gauge/BulletChart, data states on StatGroup
- Edge case testing — 0 points, 10K points, nulls, long strings, negative values
- Performance benchmarks — 50 charts, 1000-row tables, FPS and memory profiling
- Color-blind safe mode and WCAG AA contrast compliance
- i18n — translatable data state messages, RTL layout support
The Standard
API frozen. 21 components, unified architecture, 675 tests. Every visual token is a CSS variable. Every interaction flows through shared hooks. Zero deprecated props. Build on it with confidence.
- Unified architecture — useComponentConfig + useComponentInteraction on every component
- DrillDownEvent — one callback type across all 21 components
- Design tokens — z-index, type scale, transitions, neutral surfaces all via CSS variables
- Translatable strings — config.messages for i18n
- Edge case hardening — error > loading priority, null/NaN/Infinity handling
- 675 tests — edge cases, accessibility, interaction, render
- API name review — consistent prop names across every component
- Zero deprecated props, zero legacy shims, clean API surface
Beyond 1.0
After the stable release, MetricUI keeps growing. Here is a preview of what is on the horizon as post-1.0 minor releases.
More chart types
Candlestick, Box Plot, Slope Chart, Sunburst, Stream/ThemeRiver, Waffle, Network Graph, Small Multiples, Sparkline Table
Advanced features
Pivot Table, Cascading Filters, VS Code Extension, Collaborative annotations, DataStory guided walkthroughs, useMetricQuery data hook, useMetricStream real-time hook
Shape the roadmap
Have a feature request? Want to upvote something on this list? We build in the open and prioritize based on what developers actually need.