beUI Pro for mobile presale is open — Lifetime $129 for the until launch
Conversion Funnel
1 variant
Explore conversion stages with an interactive Recharts chart, period controls, and drop-off details.
Conversion Funnel
index.tsxExplore conversion stages with an interactive Recharts chart, period controls, and drop-off details.
Conversion funnel
Visitor to customer
12.0%
1,541 conversions
Customers1,541
60.0% drop-off
Activated workspaces that chose a paid plan.
TSXcomponents/previews/premium/conversion-funnel-preview.tsx
"use client";
import { ConversionFunnel } from "@/components/premium/conversion-funnel";
export function ConversionFunnelPreview() {
return (
<ConversionFunnel
periods={[
{
id: "week",
label: "7 days",
stages: [
{
id: "visits",
label: "Visitors",
value: 12840,
detail: "Unique people who visited your website.",
},
{
id: "signup",
label: "Sign-ups",
value: 6420,
detail: "Visitors who created a workspace.",
},
{
id: "active",
label: "Activated",
value: 3852,
detail: "Workspaces that completed their first project.",
},
{
id: "paid",
label: "Customers",
value: 1541,
detail: "Activated workspaces that chose a paid plan.",
},
],
},
{
id: "month",
label: "30 days",
stages: [
{
id: "visits",
label: "Visitors",
value: 52680,
detail: "Unique people who visited your website.",
},
{
id: "signup",
label: "Sign-ups",
value: 23706,
detail: "Visitors who created a workspace.",
},
{
id: "active",
label: "Activated",
value: 14224,
detail: "Workspaces that completed their first project.",
},
{
id: "paid",
label: "Customers",
value: 5932,
detail: "Activated workspaces that chose a paid plan.",
},
],
},
]}
/>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Add this component with the shadcn CLI.
$ bunx --bun shadcn add @beui-pro/conversion-funnel