beUI Pro für Mobile ist live: 50 React Native Blöcke und Screens
Conversion Funnel
1 Variante
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.",
},
],
},
]}
/>
);
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenInstallieren
Füge diese Komponente mit der shadcn CLI hinzu.
$ bunx --bun shadcn add @beui-pro/conversion-funnel