# Funnel

> Horizontal funnel: each step's share of the first, plus step-to-step conversion on the right.

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Funnel/)

Horizontal funnel: each step's share of the first, plus step-to-step conversion on the right.

Props: `steps` ({label, value, tint}), `tint` (default "sky"), `format(v)`.

- Three to six steps, named as actions people take ("Started trial"), in order.
- The right column is the conversion from the step above; that's the number people act on.

## Example

```tsx
import { Funnel } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel">
      <div>
        <h3 className="tf-panel-title">Trial to paid</h3>
        <p className="tf-panel-sub">Where people drop off</p>
      </div>
      <Funnel
        steps={[
          {
            label: "Visited pricing",
            value: 7495,
          },
          {
            label: "Started trial",
            value: 3609,
          },
          {
            label: "Invited a teammate",
            value: 2221,
          },
          {
            label: "Became paying",
            value: 1388,
          },
        ]}
      />
    </div>
  );
}
```

## Props

### Funnel

| Prop | Type | Notes |
| --- | --- | --- |
| `steps` | `{ label: string; value: number; tint?: Tint }[]` | Required |
| `tint?` | `Tint` |  |
| `format?` | `(v: number) => string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |