PremiumNew

ConversionFunnel

Visual conversion funnel with 4 stages, percentages, and gradient fill

Dashboard & Analyticsfunnelconversionstagesanalytics

Dependencies

shadcn/ui components needed:

npx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { cn } from "@/lib/utils"
6
7interface FunnelStage {
8  label: string
9  value: number
10}
11
12interface ConversionFunnelProps {
13  stages?: FunnelStage[]
14  className?: string
15}
16
17export function ConversionFunnel({ stages = [
18  { label: "Visitors", value: 10000 },
19  { label: "Signups", value: 3200 },
20  { label: "Active", value: 1800 },
21  { label: "Paid", value: 640 },
22], className }: ConversionFunnelProps) {
23  const maxValue = stages[0].value
24
25  return (
26    <Card className={cn("w-full", className)}>
27      <CardHeader>
28        <CardTitle>Conversion Funnel</CardTitle>
29      </CardHeader>
30      <CardContent>
31        <div className="space-y-4">
32          {stages.map((stage, i) => {
33            const width = (stage.value / maxValue) * 100
34            const prevValue = i > 0 ? stages[i - 1].value : stage.value
35            const conversionRate = i > 0 ? ((stage.value / prevValue) * 100).toFixed(1) : null
36
37            return (
38              <div key={i}>
39                <div className="flex items-center justify-between mb-2">
40                  <span className="font-medium text-sm">{stage.label}</span>
41                  <span className="font-bold text-sm">{stage.value.toLocaleString()}</span>
42                </div>
43                <div className="relative h-10 rounded-lg overflow-hidden bg-gradient-to-r from-blue-500 to-violet-500">
44                  <div
45                    className="absolute inset-y-0 left-0 bg-gradient-to-r from-blue-500/90 to-violet-500/90 transition-all duration-500"
46                    style={{ width: `${width}%` }}
47                  />
48                  <div className="absolute inset-0 flex items-center justify-center text-white font-semibold text-sm drop-shadow">
49                    {stage.value.toLocaleString()}
50                  </div>
51                </div>
52                {conversionRate && (
53                  <div className="flex items-center justify-center mt-2 text-xs text-muted-foreground">
54                    <span className="text-emerald-600 font-medium">{conversionRate}%</span>
55                    <span className="mx-1">↓</span>
56                    <span>conversion</span>
57                  </div>
58                )}
59              </div>
60            )
61          })}
62        </div>
63      </CardContent>
64    </Card>
65  )
66}