Layout

Dashboard

All-in-one dashboard wrapper that replaces the 5-provider nesting pattern. One component sets up MetricProvider, FilterProvider, CrossFilterProvider, LinkedHoverProvider, and DrillDown.Root — every prop is optional, every hook works inside.

Before & After

Without Dashboard, you need to nest five providers manually. The wrapper collapses all of that into a single component.

Before (5 providers)

<MetricProvider theme="emerald" exportable>
  <FilterProvider defaultPreset="30d">
    <CrossFilterProvider>
      <LinkedHoverProvider>
        <DrillDown.Root>
          <DashboardHeader title="Sales" />
          <MetricGrid>
            <KpiCard title="Revenue" value={142800} format="currency" />
            <BarChart data={data} keys={["revenue"]} indexBy="month" />
          </MetricGrid>
          <DrillDown.Overlay />
        </DrillDown.Root>
      </LinkedHoverProvider>
    </CrossFilterProvider>
  </FilterProvider>
</MetricProvider>

After (1 wrapper)

<Dashboard theme="emerald" filters={{ defaultPreset: "30d" }} exportable>
  <DashboardHeader title="Sales" />
  <MetricGrid>
    <KpiCard title="Revenue" value={142800} format="currency" />
    <BarChart data={data} keys={["revenue"]} indexBy="month" />
  </MetricGrid>
</Dashboard>

Basic Example

The simplest Dashboard — just a theme and some content. Every prop is optional; omit filters and FilterProvider is skipped entirely.

Revenue

<Dashboard theme="emerald">
  <KpiCard title="Revenue" value={142800} format="currency" />
</Dashboard>

With Filters

Pass the filters prop to enable FilterProvider. The useMetricFilters() hook and filter components like PeriodSelector become available inside.

Active Users

Conversion Rate

<Dashboard
  theme="indigo"
  filters={{ defaultPreset: "30d", defaultComparison: "previous" }}
>
  <KpiCard title="Active Users" value={8420} format="number" />
  <KpiCard title="Conversion Rate" value={0.034} format="percent" />
</Dashboard>

Full Featured

Combine theme, filters, export, dense layout, and multiple component types. All MetricUI components inherit the Dashboard configuration automatically.

Revenue

Orders

AOV

Monthly Revenue

<Dashboard
  theme="rose"
  filters={{ defaultPreset: "30d" }}
  exportable
  dense
>
  <MetricGrid>
    <KpiCard title="Revenue" value={142800} format="currency" />
    <KpiCard title="Orders" value={1284} format="number" />
    <KpiCard title="AOV" value={111.21} format="currency" />
    <BarChart
      data={revenueData}
      keys={["revenue"]}
      indexBy="month"
      title="Monthly Revenue"
      format={{ style: "currency" }}
    />
  </MetricGrid>
</Dashboard>

Individual Providers

Dashboard covers 90% of use cases, but sometimes you need fine-grained control. Use the individual providers when you need:

Two FilterProviders — e.g. a main dashboard filter and a separate modal with its own date range.
Custom renderContent — the Dashboard passes renderContent to DrillDown.Overlay, but if you need the overlay placed elsewhere in the tree, compose manually.
Partial provider stacks — e.g. MetricProvider + LinkedHoverProvider only, without cross-filter or drill-down.

// Example: two independent filter scopes
<MetricProvider theme="emerald">
  <FilterProvider defaultPreset="30d">
    <MainDashboard />
  </FilterProvider>

  <FilterProvider defaultPreset="7d">
    <ComparisonPanel />
  </FilterProvider>
</MetricProvider>

Props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	Dashboard content. All MetricUI hooks are available inside.
`theme`	`string \| ThemePreset`	—	Theme preset name or custom ThemePreset object.
`colorScheme`	`"light" \| "dark" \| "auto"`	`"auto"`	Color scheme. "auto" detects system preference.
`variant`	`CardVariant`	`"default"`	Default card variant applied to all cards.
`locale`	`string`	`"en-US"`	BCP 47 locale string for number/date formatting.
`currency`	`string`	`"USD"`	ISO 4217 currency code.
`animate`	`boolean`	`true`	Global animation toggle. Set false to disable all transitions.
`motionConfig`	`MotionConfig`	—	Spring physics config for animations.
`colors`	`string[]`	—	Default series color palette for charts.
`nullDisplay`	`"dash" \| "zero" \| "blank" \| "na"`	`"dash"`	How null values display in cards and tables.
`chartNullMode`	`"gap" \| "zero" \| "connect"`	`"gap"`	How charts handle null data points.
`dense`	`boolean`	`false`	Compact layout toggle. Reduces padding across all components.
`emptyState`	`{ message?: string; icon?: ReactNode }`	—	Default empty state template shown when data is empty.
`errorState`	`{ message?: string }`	—	Default error state template.
`loading`	`boolean`	`false`	Global loading toggle. Shows skeletons on all components.
`texture`	`boolean`	`true`	Noise texture overlay on cards.
`exportable`	`boolean`	`false`	Global export toggle. Enables export buttons on all components.
`tooltipHint`	`boolean`	`true`	Show action hints in chart tooltips.
`filters`	`{ defaultPreset?, defaultComparison?, referenceDate? }`	—	Filter configuration object. Omit to skip FilterProvider entirely.
`filters.defaultPreset`	`PeriodPreset`	—	Initial period preset (e.g. "7d", "30d", "90d").
`filters.defaultComparison`	`ComparisonMode`	`"none"`	Initial comparison mode.
`filters.referenceDate`	`Date`	`now`	Reference date for preset calculations.
`maxDrillDepth`	`number`	`4`	Max drill-down nesting depth.
`renderContent`	`(ctx: DrillDownContext) => ReactNode`	—	Render function for reactive drill-down overlay content.

Notes

Dashboard replaces the 5-provider nesting pattern: MetricProvider, FilterProvider, CrossFilterProvider, LinkedHoverProvider, and DrillDown.Root.
Every prop is optional. A bare <Dashboard> still sets up all providers with sensible defaults.
All hooks work inside: useMetricFilters(), useCrossFilter(), useLinkedHover(), useDrillDownAction(), useMetricConfig().
Omit the filters prop to skip FilterProvider entirely — useful when you don't need date range filtering.
For fine-grained control (multiple FilterProviders, custom overlay placement), compose the individual providers directly.
The DrillDown.Overlay is rendered automatically inside Dashboard. Use renderContent to customize what appears when a drill-down opens.