# Flow
> Sankey from Chat, Code and API to three models, with particles streaming in proportion to traffic; hovering a band isolates it.
- Element: `<hf-flow>`
- React: `import { HfFlow } from "@/components/lumesec/hf-flow"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-flow.json
- Page: https://elements.lumesec.ai/components/pixel-hd/flow



Live preview: https://elements.lumesec.ai/view/hf-flow

```html
<hf-flow></hf-flow>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-flow
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-flow.json
```

## Usage

React:

```tsx
import { HfFlow } from "@/components/lumesec/hf-flow";

export function Example() {
  return (
    <HfFlow />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-flow.js"></script>

<hf-flow></hf-flow>
```

## Behaviour

A sankey from surfaces to models, with particles streaming along each band in proportion to its traffic. Hover a band to isolate it.

## API reference

### Attributes

| Attribute | React prop | Type     | Default             | Description                         |
| --------- | ---------- | -------- | ------------------- | ----------------------------------- |
| `label`   | `label`    | `string` | `Where requests go` | Heading text. Read once on connect. |

## Accessibility

* The canvas has `role="img"` with an `aria-label` that lists every flow, for example `Chat: 12k to Opus, 26k to Sonnet, 8k to Haiku`.
* Node names and totals are text beside the chart.
* The band tooltip appears on hover only.
* Reduced motion: bands appear at once without growing in, no particles stream and drawing stops.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-muted` and `--ui-raised`.

## Notes

* Data is built in: three sources, three models and 100k requests in total. It cannot be configured.
* The chart is 220px tall and fills the width between the two label columns.