# Funnel
> Funnel chart where dots fall through the stages in proportion to conversion and drop-outs turn red and drift off the side.
- Element: `<hf-funnel>`
- React: `import { HfFunnel } from "@/components/lumesec/hf-funnel"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-funnel.json
- Page: https://elements.lumesec.ai/components/pixel-hd/funnel



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

```html
<hf-funnel data="Visited:12400,Signed up:4210,Activated:2380,Paid:910"></hf-funnel>
```

## 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-funnel
```

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-funnel.json
```

## Usage

React:

```tsx
import { HfFunnel } from "@/components/lumesec/hf-funnel";

export function Example() {
  return (
    <HfFunnel data="Visited:12400,Signed up:4210,Activated:2380,Paid:910" />
  );
}
```

HTML:

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

<hf-funnel data="Visited:12400,Signed up:4210,Activated:2380,Paid:910"></hf-funnel>
```

## Behaviour

Dots fall through the stages in proportion to conversion; the ones that drop out turn red and drift off the side.

## API reference

### Attributes

| Attribute | React prop | Type     | Default                                                | Description                                                                                                        |
| --------- | ---------- | -------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| `data`    | `data`     | `string` | `Visited:12400,Signed up:4210,Activated:2380,Paid:910` | Comma-separated `Label:count` stages, top to bottom. Each stage width is relative to the first, with a 6% minimum. |

### Properties

| Property             | Type                                  | Description                       |
| -------------------- | ------------------------------------- | --------------------------------- |
| `stages` (read-only) | `Array<{ label: string, v: number }>` | Stages parsed from the attribute. |

## Accessibility

* The canvas has `role="img"` and an `aria-label` listing each stage and count.
* Each row shows the stage, its count and the conversion from the previous stage as text.
* Isolating a stage works by pointer hover only.
* Reduced motion: no particles are drawn and the stages appear at full width without growing.

## 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 `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* Stages should be in descending order: the drop-out rate between two stages comes from their ratio.
* Each stage row is 44px tall, so the height follows the number of stages.
* `data` is not observed; the text rows are built once on connect.