# Control center

Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.

- ID: `control-center`
- Import: `animui/control-center`
- Category: Special
- Runtime exports: `ControlCenter`
- Declaration: `types/pro/control-center.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: switch, slider, radio-group, time-dial, dialog

```tsx
import { ControlCenter } from 'animui/control-center';
```

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 control-center` 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 type LucideIcon = ComponentType<{ size?: number; strokeWidth?: number; 'aria-hidden'?: boolean }>;
export interface ControlCenterProps {
  focusModes: { id: string; label: string; icon: LucideIcon; description: string; defaultMinutes: number }[];
  channels: { id: string; label: string; description?: string; defaultOn?: boolean }[];
  people?: { id: string; name: string; avatar: string }[];
  defaultVolume?: number;
  defaultTextSize?: number;
  formatTime?: (date: Date) => string;
  onStateChange?: (state: { focus: { mode: string; minutes: number; until: string } | null; notifications: boolean; channels: Record<string, boolean>; presenting: boolean; volume: number; textSize: number }) => void;
  label?: string;
  className?: string;
}

export declare const ControlCenter: ComponentType<ControlCenterProps>;

export default ControlCenter;
```