1 variant

Funnel Chart

A conversion funnel as horizontal stages measured against the first, with the step conversion and the drop off between each.

Signup funnelLast 30 days6.3%end to end

Visited pricing12,840100%
32.8% continue8.6K drop off
Started signup4,21033%
80.5% continue820 drop off
Verified email3,39026%
24.0% continue2.6K drop off
Paid8126%

usage.tsx

import { FunnelChart } from "@/components/registry/funnel-chart";

export function Funnel() {
  return (
    <FunnelChart
      stages={[
        { label: "Visited", value: 12840 },
        { label: "Paid", value: 812 },
      ]}
    />
  );
}

"use client";

import { useReducedMotion } from "motion/react";
import { useRef } from "react";
import { ChartFrame, ChartTable, formatCompact, formatNumber, seriesColor, useSeen } from "@/components/registry/chart-core";

export interface FunnelStage {
  label: string;
  value: number;
}

export interface FunnelChartProps {

89 more lines ship with an easeUI Pro license.

Install

$ bunx --bun shadcn add @easeui-pro/funnel-chart

Stage	Count	Of first stage
Visited pricing	12,840	100%
Started signup	4,210	33%
Verified email	3,390	26%
Paid	812	6%