# Data flow

Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are on the right. Records leave as hollow dots and travel curved paths. In the core they turn into solid accent squares, then fan out to each destination; alerts receives about every third record.

- ID: `data-flow`
- Import: `animui/data-flow`
- Category: Special
- Runtime exports: `DataFlow`
- Declaration: `types/pro/data-flow.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: sankey-flow, orbit-logos, realtime-stream

```tsx
import { DataFlow } from 'animui/data-flow';
```

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 data-flow` 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 DataFlowProps {
  sources?: { id?: string; label: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string }[];
  destinations?: { id?: string; label: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string; share?: number }[];
  core?: { label?: string; detail?: string; countLabel?: string; countStart?: number };
  speed?: number;
  paused?: boolean;
  accent?: string;
  label?: string;
  caption?: ReactNode;
  className?: string;
  style?: CSSProperties;
}

export declare const DataFlow: ComponentType<DataFlowProps>;

export default DataFlow;
```