# Budget variance

Budget against actual operating spend by department as aligned bullet charts, with favorable and unfavorable variance, a month, quarter and year to date switch that springs every bar, in-place drill-down into budget lines, and a total row.

- ID: `budget-variance`
- Import: `animui/budget-variance`
- Category: block
- Runtime exports: `BudgetVariance`
- Declaration: `types/pro/budget-variance.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: mrr-waterfall, usage-forecast, revenue-explorer, metrics-dashboard

```tsx
import { BudgetVariance } from 'animui/budget-variance';
```

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 budget-variance` 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 BudgetVarianceProps {
  departments?: string | number | boolean | ReactNode;
  periods?: string | number | boolean | ReactNode;
  defaultPeriod?: string | number | boolean | ReactNode;
  defaultExpanded?: string | number | boolean | ReactNode;
  ranges?: string | number | boolean | ReactNode;
  onPlanThreshold?: () => void;
  currency?: string | number | boolean | ReactNode;
  title?: string;
  description?: string;
  onPeriodChange?: () => void;
  onDepartmentToggle?: () => void;
  className?: string;
}

export declare const BudgetVariance: ComponentType<BudgetVarianceProps>;

export default BudgetVariance;
```