{ "markdown": "

\n \"MetricUI\"\n

\n\n

MetricUI

\n\n

\n The missing UI layer for React dashboards.\n
\n KPI cards, charts, tables, and layout — with built-in formatting, theming, data states, and zero config.\n

\n\n

\n Homepage ·\n Docs ·\n Analytics Demo ·\n SaaS Demo ·\n GitHub Demo ·\n Wikipedia Live ·\n MCP Server ·\n Roadmap\n

\n\n---\n\n

\n \"MetricUI\n

\n\n

\n Web Analytics · SaaS Metrics · GitHub Analytics · Wikipedia Live · World Explorer — all with AI Insights, cross-filtering, drill-downs, and export.\n

\n\n---\n\n## Install\n\n```bash\nnpm install metricui\n```\n\nThat's it. All chart dependencies are included.\n\n### CDN (no bundler needed)\n\nFor browser sandboxes, Claude artifacts, v0, Bolt, or anywhere without npm:\n\n```tsx\nimport { KpiCard, AreaChart, MetricProvider } from \"https://cdn.jsdelivr.net/npm/metricui@latest/dist/metricui.browser.mjs\";\n```\n\n```html\n\n```\n\n---\n\n## Why MetricUI?\n\nYou're building a dashboard. You need KPI cards, charts, tables. You reach for Recharts + shadcn + custom CSS and spend days wiring up formatting, dark mode, loading states, and responsive layouts.\n\n**Stop assembling dashboards from parts.**\n\n```tsx\nimport {\n Dashboard, DashboardHeader, PeriodSelector,\n MetricGrid, KpiCard, AreaChart, DonutChart, DataTable, Callout,\n} from \"metricui\";\nimport \"metricui/styles.css\";\n\nexport default function App() {\n return (\n \n } />\n\n \n \n \n \n \n\n \n\n \n \n \n\n \n \n \n \n );\n}\n```\n\n**Zero layout code.** `` wraps all providers (theme, filters, cross-filter, drill-down, linked hover) in one component. MetricGrid auto-detects component types — KPIs row up, charts pair, tables go full width. DashboardHeader shows live status with auto-ticking \"Updated Xm ago\". Responsive out of the box.\n\n---\n\n## Features\n\n### AI Insights — Bring Your Own LLM\n\nDrop `` into any dashboard. A floating chat button appears — click it, ask questions about your data. The AI auto-collects live data from every component, builds context-rich prompts, and streams analysis. Use `@` to reference specific charts. Works with any LLM (OpenAI, Anthropic, local models). [Docs →](https://metricui.com/docs/ai-insights)\n\n```tsx\n\n \n \n\n```\n\n### KPI Cards — Not Just Numbers\n\n

\n \"KpiCard\n

\n\nSparkline with previous-period overlay. Goal progress bars. Conditional red/amber/green coloring. Multiple comparison badges. Copyable values. Drill-down links. [Docs →](https://metricui.com/docs/kpi-card)\n\n### Headline Numbers on Any Chart\n\nEvery chart and table accepts a `headline` prop — a summary number in the card header that gives you the punchline at a glance.\n\n```tsx\n\n // string shorthand\n```\n\nSupports formatting, comparison badges with trend arrows, and conditional coloring — same features as KpiCard, right in the chart header.\n\n### Charts with Reference Lines & Threshold Bands\n\n

\n \"AreaChart\n

\n\nMark targets, benchmarks, and danger zones directly on charts. Comparison overlays show period-over-period trends as dashed lines. Works on [AreaChart](https://metricui.com/docs/area-chart), [LineChart](https://metricui.com/docs/line-chart), and [BarChart](https://metricui.com/docs/bar-chart).\n\n```tsx\n\n```\n\n### Data-Driven Alerts\n\n

\n \"Callout\n

\n\nPass a value and rules — [Callout](https://metricui.com/docs/callout) auto-selects the right variant, title, and message. Supports embedded formatted metrics, action buttons, collapsible detail, and auto-dismiss.\n\n### Expandable Data Tables\n\n

\n \"DataTable\n

\n\nClick a row and a mini-dashboard slides open — sparklines, gauges, status indicators, badges. Plus search, multi-sort, pagination, pinned columns, 12 column types, and row conditions. [Docs →](https://metricui.com/docs/data-table)\n\n### Conversion Funnels\n\n

\n \"Funnel\n

\n\nAuto-computed stage-to-stage conversion rates. Vertical or horizontal. Smooth or linear interpolation. [Docs →](https://metricui.com/docs/funnel)\n\n### Light & Dark Mode\n\n

\n \"MetricUI\n

\n\nWikipedia live demo in light mode.\n\nCSS variables. Zero config. Every component adapts automatically. [Theming guide →](https://metricui.com/docs/guides/theming)\n\n### Smart Format Engine\n\nOne prop formats any value. Currency, percentages, durations, compact notation — with locale support. [Docs →](https://metricui.com/docs/guides/format-engine)\n\n```tsx\n // → $127.5K\n // → 4.2%\n // → 1h 2m 5s\n // → 2.4M\n```\n\n### Theme Presets\n\nOne prop. Entire dashboard changes color. 8 built-in presets. Custom presets via `ThemePreset` type. [Theming guide →](https://metricui.com/docs/guides/theming)\n\n```tsx\n // Green accent + green-first chart palette\n // Pink accent + pink-first chart palette\n // Warm amber everything\n```\n\n### MetricGrid — Zero Layout Code\n\nDrop components in. It figures out the layout. [Docs →](https://metricui.com/docs/metric-grid)\n\n```tsx\n\n \n \n {/* Auto 2/3 width */}\n {/* Auto 1/3 width */}\n {/* Auto full width */}\n\n```\n\n### Filter System\n\nComplete filter context — wire [PeriodSelector](https://metricui.com/docs/period-selector), [DropdownFilter](https://metricui.com/docs/dropdown-filter), [SegmentToggle](https://metricui.com/docs/segment-toggle), and [FilterTags](https://metricui.com/docs/filter-tags) together with zero boilerplate. [Filtering guide →](https://metricui.com/docs/guides/filtering)\n\n```tsx\n\n } />\n \n \n {/* Auto-renders active filters as dismissible chips */}\n\n```\n\n### Saved Views & Shareable Links\n\n`useDashboardState()` captures the entire dashboard state (filters, period, dimensions, cross-filter) as a JSON-safe snapshot. Serialize to URL params for shareable links or persist to localStorage / your backend. [Cookbook recipe →](https://metricui.com/docs/guides/cookbook#saved-views)\n\n### Data States\n\nEvery component handles loading, empty, error, and stale states out of the box. [Docs →](https://metricui.com/docs/guides/data-states)\n\n### Error Boundaries\n\nOne chart crashes? The rest keep running. Dev mode shows component name + actionable hints. Prod mode shows clean retry UI.\n\n### Accessibility\n\n`prefers-reduced-motion`, focus-visible rings, ARIA attributes on charts, keyboard-accessible drill-downs. [Docs →](https://metricui.com/docs/guides/accessibility)\n\n---\n\n## Components\n\n### Cards & Metrics\n\n| Component | What it does | Docs |\n|-----------|-------------|------|\n| [**KpiCard**](https://metricui.com/docs/kpi-card) | Comparison badges, sparkline overlays, goal progress, conditional coloring, copyable, drill-down | [Docs](https://metricui.com/docs/kpi-card) |\n| [**StatGroup**](https://metricui.com/docs/stat-group) | Multiple metrics in a dense responsive grid row with per-stat comparisons | [Docs](https://metricui.com/docs/stat-group) |\n\n### Charts\n\n| Component | What it does | Docs |\n|-----------|-------------|------|\n| [**AreaChart**](https://metricui.com/docs/area-chart) | Gradient fills, stacking, dual Y-axis, comparison overlays, reference lines, threshold bands | [Docs](https://metricui.com/docs/area-chart) |\n| [**LineChart**](https://metricui.com/docs/line-chart) | Clean lines — same props as AreaChart without fill | [Docs](https://metricui.com/docs/line-chart) |\n| [**BarChart**](https://metricui.com/docs/bar-chart) | 6 presets, comparison/target bars, sorting, negative values, reference lines | [Docs](https://metricui.com/docs/bar-chart) |\n| [**BarLineChart**](https://metricui.com/docs/bar-line-chart) | Dual-axis combo: bars + lines — unified data format | [Docs](https://metricui.com/docs/bar-line-chart) |\n| [**DonutChart**](https://metricui.com/docs/donut-chart) | Center KPI content, arc labels, percentage mode | [Docs](https://metricui.com/docs/donut-chart) |\n| [**Gauge**](https://metricui.com/docs/gauge) | Arc gauge with threshold zones, target markers, comparison badges | [Docs](https://metricui.com/docs/gauge) |\n| [**HeatMap**](https://metricui.com/docs/heatmap) | 2D matrix, cross-hair hover, sequential + diverging color scales | [Docs](https://metricui.com/docs/heatmap) |\n| [**Funnel**](https://metricui.com/docs/funnel) | Conversion pipeline with auto-computed rates | [Docs](https://metricui.com/docs/funnel) |\n| [**Waterfall**](https://metricui.com/docs/waterfall) | Sequential +/- changes with auto running totals, connectors | [Docs](https://metricui.com/docs/waterfall) |\n| [**BulletChart**](https://metricui.com/docs/bullet-chart) | Actual vs target with qualitative range bands | [Docs](https://metricui.com/docs/bullet-chart) |\n| [**ScatterPlot**](https://metricui.com/docs/scatter-plot) | Two-variable correlation with bubble size, reference lines, linked hover | [Docs](https://metricui.com/docs/scatter-plot) |\n| [**Treemap**](https://metricui.com/docs/treemap) | Hierarchical part-of-whole with flat or nested data | [Docs](https://metricui.com/docs/treemap) |\n| [**Calendar**](https://metricui.com/docs/calendar) | GitHub-style heatmap with auto date range detection | [Docs](https://metricui.com/docs/calendar) |\n| [**Radar**](https://metricui.com/docs/radar) | Multi-axis comparison with overlay support | [Docs](https://metricui.com/docs/radar) |\n| [**Sankey**](https://metricui.com/docs/sankey) | Flow visualization with gradient links, flat or native data | [Docs](https://metricui.com/docs/sankey) |\n| [**Choropleth**](https://metricui.com/docs/choropleth) | Geographic heatmap with bundled world + US state maps, sqrt/log scale | [Docs](https://metricui.com/docs/choropleth) |\n| [**Bump**](https://metricui.com/docs/bump) | Ranking chart with auto-ranking from flat data | [Docs](https://metricui.com/docs/bump) |\n| [**Sparkline**](https://metricui.com/docs/sparkline) | Inline micro-chart with reference lines, bands, trend coloring | [Docs](https://metricui.com/docs/sparkline) |\n| [**DataTable**](https://metricui.com/docs/data-table) | Sort, search, pagination, expandable rows, 12 column types, pinned columns, row conditions | [Docs](https://metricui.com/docs/data-table) |\n\n### Layout\n\n| Component | What it does | Docs |\n|-----------|-------------|------|\n| [**Dashboard**](https://metricui.com/docs/dashboard) | All-in-one wrapper — replaces 5 nested providers in one component | [Docs](https://metricui.com/docs/dashboard) |\n| [**DashboardHeader**](https://metricui.com/docs/dashboard-header) | Live/stale status, auto-ticking \"Updated Xm ago\", breadcrumbs, action slots | [Docs](https://metricui.com/docs/dashboard-header) |\n| [**DashboardNav**](https://metricui.com/docs/dashboard-nav) | Tab/scroll navigation with sliding indicator, keyboard nav, URL sync | [Docs](https://metricui.com/docs/dashboard-nav) |\n| [**MetricGrid**](https://metricui.com/docs/metric-grid) | Smart auto-layout grid with staggered reveal animations | [Docs](https://metricui.com/docs/metric-grid) |\n| [**SectionHeader**](https://metricui.com/docs/section-header) | Labeled divider with description popover, badge, action slot | [Docs](https://metricui.com/docs/section-header) |\n| [**Divider**](https://metricui.com/docs/divider) | Horizontal/vertical separator with label, icon, accent | [Docs](https://metricui.com/docs/divider) |\n\n### Filters\n\n| Component | What it does | Docs |\n|-----------|-------------|------|\n| **FilterProvider** | Context that wires all filter components. `useMetricFilters()` hook | [Guide](https://metricui.com/docs/guides/filtering) |\n| [**PeriodSelector**](https://metricui.com/docs/period-selector) | Date range presets, custom ranges, comparison toggle | [Docs](https://metricui.com/docs/period-selector) |\n| [**DropdownFilter**](https://metricui.com/docs/dropdown-filter) | Multi-select dimension filter with search, grouped options | [Docs](https://metricui.com/docs/dropdown-filter) |\n| [**SegmentToggle**](https://metricui.com/docs/segment-toggle) | Pill toggle with icons, badges, multi-select | [Docs](https://metricui.com/docs/segment-toggle) |\n| [**FilterTags**](https://metricui.com/docs/filter-tags) | Auto-renders active filters as dismissible chips | [Docs](https://metricui.com/docs/filter-tags) |\n\n### Status & Alerts\n\n| Component | What it does | Docs |\n|-----------|-------------|------|\n| [**Callout**](https://metricui.com/docs/callout) | Data-driven alerts with rules, `{value}` templates, embedded metrics | [Docs](https://metricui.com/docs/callout) |\n| [**StatusIndicator**](https://metricui.com/docs/status-indicator) | Rule-based health with 5 sizes, pulse animation, trend arrows | [Docs](https://metricui.com/docs/status-indicator) |\n| [**Badge**](https://metricui.com/docs/badge) | 6 variants, 3 sizes, custom colors, icons, dismiss | [Docs](https://metricui.com/docs/badge) |\n\n---\n\n## AI-First: MCP Server + llms.txt\n\nMost component libraries give you docs and hope the AI figures it out. MetricUI gives the AI **structured knowledge of every component, every prop, and every pattern** — so it generates production-quality dashboards on the first try.\n\n```bash\n# One command. That's it.\nclaude mcp add --transport stdio metricui -- npx -y @metricui/mcp-server\n```\n\n### The difference is real\n\nHere's what happens when you prompt an AI with **\"Build me a SaaS dashboard with MRR, churn, users, and revenue breakdown\"**:\n\n
\nWithout MetricUI MCP — what the AI generates with Recharts / generic components\n\n```tsx\n// The AI guesses at library APIs, builds everything from scratch\nimport { LineChart, Line, XAxis, YAxis, PieChart, Pie } from \"recharts\";\n\nexport default function Dashboard() {\n return (\n
\n

SaaS Dashboard

\n\n
\n
\n

MRR

\n

${(127450).toLocaleString()}

\n

+12.3%

\n
\n
\n

Churn Rate

\n

3.2%

\n

-13.5%

\n
\n {/* ...more hand-built cards with no formatting engine, no sparklines,\n no conditional coloring, no goal tracking... */}\n
\n\n \n \n \n \n {/* No reference lines. No threshold bands. No comparison overlay.\n No dark mode. No loading states. No error boundaries. */}\n \n
\n );\n}\n```\n\nRaw `div` cards. Manual number formatting. No sparklines, no conditions, no goals, no filters, no dark mode, no data states, no error boundaries. Every dashboard looks the same.\n\n
\n\n
\nWith MetricUI MCP — what the AI generates (real output, unedited)\n\n```tsx\nimport {\n Dashboard, DashboardHeader, PeriodSelector,\n MetricGrid, KpiCard, Callout, AreaChart, DonutChart, BarChart,\n DataTable, Badge,\n} from \"metricui\";\nimport \"metricui/styles.css\";\n\nexport default function App() {\n return (\n \n }\n />\n \n \n\n \n\n \n\n \n\n \n\n {} }} />\n\n \n\n \n\n \n\n \n \n \n\n \n {String(v)} },\n { key: \"mrr\", header: \"MRR\", format: \"currency\", sortable: true },\n { key: \"status\", header: \"Status\",\n render: (v) => {String(v)} },\n ]} />\n \n \n );\n}\n```\n\n
\n\n**Same prompt. The AI with MetricUI MCP generates:**\n- DashboardHeader with live status + auto-ticking \"Updated Xm ago\"\n- Dashboard wrapper with filters, cross-filtering, and comparison toggle\n- MetricGrid auto-layout (zero CSS)\n- KpiCards with conditional coloring, goal progress bars, sparkline overlays, drill-down links\n- AreaChart with dashed target reference line, danger zone threshold band, and previous-period comparison overlay\n- Data-driven Callout that auto-picks severity from a growth number\n- Sorted grouped BarChart, DonutChart with center KPI\n- Searchable DataTable with Badge status columns\n- Theme preset, dark mode, animations, error boundaries — all automatic\n\n**The AI doesn't guess. It knows.** 13 tools, 26 components, every prop, every pattern. [Full MCP Server docs →](https://metricui.com/docs/guides/mcp-server)\n\n### llms.txt\n\nMachine-readable documentation for AI models at [`/llms.txt`](https://metricui.com/llms.txt). Every component, every prop, every type, every pattern — so even AI tools without MCP support can generate correct MetricUI code.\n\n---\n\n## Roadmap\n\nMetricUI is building toward 1.0 — cross-filtering, zero-config charts, anomaly detection, data stories, and a stable API you can build on with confidence. See what's shipped, what's next, and where we're headed:\n\n**[View the full roadmap →](https://metricui.com/roadmap)**\n\n---\n\n## Built With\n\n- [Nivo](https://nivo.rocks) — chart rendering (line, bar, pie, heatmap)\n- [Tailwind CSS](https://tailwindcss.com) — styling (ships pre-built, Tailwind not required in your project)\n- [Lucide](https://lucide.dev) — icons\n- [React](https://react.dev) 18/19\n\n---\n\n## License\n\nMIT\n\n---\n\n

\n Built for developers who care about design.\n

\n", "bytes": 25646, "sha": "767b76378813296a0e0562c68a898d6ddd349afc7ba3148d3f6df47fc6d3a4d5", "repo_slug": "mpmcgowen/metricui", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_mpmcgowen_metricui_a70fc818/readme" }