MetricUI

What is MetricUI?

MetricUI is a React component library that provides the missing UI layer for dashboards — KPI cards, charts, tables, and layout with built-in formatting, theming, data states, and zero configuration. It’s designed for developers building analytics, SaaS, or operational dashboards.

How to use MetricUI?

Install via npm with npm install metricui, then import components such as Dashboard, KpiCard, AreaChart, and DataTable along with the default styles. A CDN version is also available for browser sandboxes or environments without a bundler. No additional chart dependencies are required.

Key features of MetricUI

• AI Insights with bring-your-own LLM and auto-collected data context.
• KPI cards with sparklines, goal progress, and conditional coloring.
• Charts with reference lines, threshold bands, and comparison overlays.
• Smart format engine for currency, percent, duration, and compact notation.
• MetricGrid auto-layout: KPIs row up, charts pair, tables go full width.
• Light/dark mode with CSS variables, no configuration needed.

Use cases of MetricUI

• Building a real-time analytics dashboard with cross-filtering and drill-downs.
• Creating a SaaS metrics overview with period comparisons and goal tracking.
• Embedding data tables with expandable rows and advanced sorting/search.
• Constructing conversion funnels with auto-computed stage-to-stage rates.
• Adding AI-powered exploratory analysis via a floating chat interface.

FAQ from MetricUI

What data sources does MetricUI connect to?

MetricUI is a front-end library only; it does not include data fetching. You pass your own data (static or from any backend) as props to the components.

Does MetricUI require a bundler or build tool?

No. It works with any React setup (Vite, Next.js, etc.) and also provides a browser-friendly CDN import for sandboxes and environments without a bundler.

How do I theme the dashboard?

Set the theme prop on <Dashboard> using one of the built‑in presets (e.g., "emerald", "rose", "amber") or create a custom preset via the ThemePreset type. All components adapt automatically.

Is MetricUI accessible?

Yes. It honors prefers-reduced-motion, applies focus‑visible rings, includes ARIA attributes on charts, and supports keyboard‑accessible drill‑downs.

What happens if a chart crashes?

Error boundaries isolate failures: one broken chart does not affect other components. Dev mode shows the component name with hints; production shows a clean retry UI.