# KPI drilldown

KPI cards that expand into a full detail chart with period comparison and a breakdown table, then fold back.

- ID: `kpi-drilldown`
- Import: `animui/kpi-drilldown`
- Category: block
- Runtime exports: `KpiDrilldown`
- Declaration: `types/pro/kpi-drilldown.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: metrics-dashboard, metric-explorer, revenue-explorer, mrr-waterfall, bar-chart

```tsx
import { KpiDrilldown } from 'animui/kpi-drilldown';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info kpi-drilldown` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface KpiDrilldownProps {
  kpis?: string | number | boolean | ReactNode;
  dimensions?: string | number | boolean | ReactNode;
  end?: string | number | boolean | ReactNode;
  defaultRange?: string | number | boolean | ReactNode;
  selected?: string | number | boolean | ReactNode;
  onSelectedChange?: () => void;
  title?: string;
  className?: string;
}

export declare const KpiDrilldown: ComponentType<KpiDrilldownProps>;

export default KpiDrilldown;
```