Funnel Chart

Component 40

About

Here is Funnel Chart component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Funnel Chart to your project and fits it to your theme.

Code

How Funnel Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function FunnelChartDemo4() {
  return (
    <div className="mx-auto w-[60%] max-w-3xl">
      <FunnelChart
        data={[
          { label: "Awareness", value: 4100, color: "var(--chart-1)" },
          { label: "Interest", value: 2957, color: "var(--chart-2)" },
          { label: "Consideration", value: 1084, color: "var(--chart-3)" },
          { label: "Intent", value: 1038, color: "var(--chart-4)" },
          { label: "Purchase", value: 320, color: "var(--chart-5)" },
        ]}
        layers={3}
      />
    </div>
  );
}