Flow

Sankey from Chat, Code and API to three models, with particles streaming in proportion to traffic; hovering a band isolates it.

View as Markdown

<hf-flow>· loading

Playground

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

Loading <hf-flow>

Props

labelremounts

<HfFlow label="Where requests go" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-flow

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-flow.json

Usage

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

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

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

labelReact proplabelTypestringDefaultWhere 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.

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.

<hf-area>

<hf-donut>

<hf-stat>

<hf-funnel>

Was this page helpful?

Related