{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "funnel-1", "title": "Funnel 1: conversion funnel", "author": "Ballmac ", "description": "A conversion funnel: bars sized against the first step, joined by connectors that narrow as people drop away, with share kept and people lost at each step, the biggest leak written out, a group switch and a panel for any chosen step.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/funnel-1/funnel-1.tsx", "content": "// Ballmac UI: Funnel 1. https://ui.ballmac.com/blocks/funnel-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDown, Filter, Lightbulb } from \"lucide-react\"\n\nimport { SegmentedControl, SegmentedControlItem } from \"@/components/ballmac/segmented-control\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Funnel1Step = { id: string; name: string; /** People who reached this step. */ count: number }\ntype Funnel1Segment = { id: string; label: string; steps: Funnel1Step[] }\n\ntype Funnel1Props = Omit, \"title\"> &\n StateProps & {\n title?: string\n description?: string\n /** One list of steps per group of people (all, mobile, from ads). The first is shown at first. */\n segments?: Funnel1Segment[]\n /** \"Last 30 days\", already written for people. */\n period?: string\n locale?: string\n /** The step whose details are open at first. */\n defaultSelectedId?: string\n }\n\nconst steps = (counts: number[]): Funnel1Step[] => [\"Visited the site\", \"Viewed a product\", \"Added to cart\", \"Started checkout\", \"Paid\"].map((name, i) => ({ id: `s${i}`, name, count: counts[i]! }))\n\nconst sample: Funnel1Segment[] = [\n { id: \"all\", label: \"Everyone\", steps: steps([48210, 29840, 11620, 6180, 4390]) },\n { id: \"mobile\", label: \"Mobile\", steps: steps([31470, 17450, 5980, 2540, 1480]) },\n { id: \"desktop\", label: \"Desktop\", steps: steps([16740, 12390, 5640, 3640, 2910]) },\n]\n\nfunction Skel() {\n return (\n
\n {[100, 70, 45, 28, 16].map((w, i) => (\n
\n \n \n
\n ))}\n
\n )\n}\n\n/**\n * A conversion funnel: each step as a bar sized against the first, joined by connectors that narrow as people drop away, with what share\n * continued and how many were lost between steps. The biggest leak is found for you and written out as a sentence, a segment switch compares\n * groups, and choosing a step shows exactly what happened there. Every figure is worked out from the counts.\n */\nfunction Funnel1({\n title = \"Checkout funnel\",\n description = \"Where people stop on the way from a first visit to a payment.\",\n segments = sample,\n period = \"Last 30 days\",\n locale = \"en\",\n defaultSelectedId,\n state = \"ready\",\n onRetry,\n emptyState,\n errorState,\n className,\n ...props\n}: Funnel1Props) {\n const id = React.useId()\n const list = state === \"empty\" ? [] : segments\n const [seg, setSeg] = React.useState(list[0]?.id ?? \"\")\n const [pick, setPick] = React.useState(defaultSelectedId ?? null)\n const active = list.find((s) => s.id === seg) ?? list[0]\n const n = (x: number) => new Intl.NumberFormat(locale).format(x)\n\n const model = React.useMemo(() => {\n if (!active?.steps.length) return null\n const st = active.steps\n const top = st[0]!.count || 1\n const rows = st.map((s, i) => {\n const prev = i ? st[i - 1]!.count : s.count\n return { ...s, share: s.count / top, kept: prev ? s.count / prev : 0, lost: prev - s.count, i }\n })\n const leak = rows.slice(1).reduce((b, r) => (!b || r.lost / (rows[r.i - 1]!.count || 1) > b.lost / (rows[b.i - 1]!.count || 1) ? r : b), null as (typeof rows)[number] | null)\n return { rows, leak, overall: st.at(-1)!.count / top }\n }, [active])\n\n const chosen = model?.rows.find((r) => r.id === pick)\n\n const content = !model ? (\n
\n \n \n \n

{emptyState?.title ?? \"No funnel data yet\"}

\n

{emptyState?.description ?? \"Once visitors move through the steps, the funnel appears here.\"}

\n {emptyState?.action}\n
\n ) : (\n
\n
\n
\n
\n

Overall conversion

\n

\n {(model.overall * 100).toFixed(model.overall < 0.1 ? 1 : 0)}%\n \n {n(model.rows.at(-1)!.count)} of {n(model.rows[0]!.count)}\n \n

\n
\n {list.length > 1 ? (\n { setSeg(v); setPick(null) }} aria-label=\"Group\" size=\"sm\">\n {list.map((s) => (\n \n {s.label}\n \n ))}\n \n ) : null}\n
\n\n
    \n {model.rows.map((r, i) => {\n const next = model.rows[i + 1]\n const w = Math.max(r.share * 100, 6)\n const nw = next ? Math.max(next.share * 100, 6) : 0\n const isLeak = model.leak && next && model.leak.id === next.id\n return (\n
  1. \n setPick(pick === r.id ? null : r.id)}\n className=\"focus-visible:ring-ring/50 group block w-full rounded-xl text-start outline-none focus-visible:ring-[3px]\"\n >\n \n \n {r.i + 1}\n {r.name}\n \n \n {n(r.count)} · {(r.share * 100).toFixed(r.share < 0.1 ? 1 : 0)}%\n \n \n \n \n \n \n {next ? (\n
    \n \n \n \n {n(next.lost)} lost · {((1 - next.kept) * 100).toFixed(0)}%\n \n
    \n ) : null}\n
    2. \n )\n })}\n
\n
\n\n \n
\n )\n\n return (\n
\n
\n

{period}

\n

\n {title}\n

\n

{description}

\n
\n } error={{ title: errorState?.title ?? \"The funnel could not be loaded\", description: errorState?.description ?? \"Check your connection and try again.\", ...errorState }}>\n {content}\n \n
\n )\n}\n\nexport { Funnel1, type Funnel1Props, type Funnel1Segment, type Funnel1Step }\n", "type": "registry:component", "target": "@components/ballmac/blocks/funnel-1/funnel-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "funnel", "conversion", "analytics", "drop-off", "checkout", "growth", "steps", "dashboard", "metrics" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "A conversion funnel. . Counts must be people who reached each step, first to last. Share of the first step, share kept from the step before, people lost, overall conversion and the biggest leak (the largest proportional drop) are worked out. A segment switch shows when there are two or more groups.", "whenToUse": [ "Analytics for signup, onboarding or checkout flows", "Showing where a growth experiment should focus" ], "whenNotToUse": [ "Results of an A/B test (use experiments-1)", "Trends over time (use a chart)" ], "composesWith": [ "experiments-1", "app-shell-1", "dashboard-1" ], "a11y": [ { "keys": "Tab, Enter / Space", "action": "Each step is a button that says its count, its share of the first step and of the step before; pressing it shows the same in a panel announced politely" }, { "keys": "Loss", "action": "Written as 'N lost · 38%' beside the connector, and the biggest leak is a full sentence, not only a red outline" }, { "keys": "Group", "action": "A labelled switch between groups, such as Everyone, Mobile and Desktop" } ], "customization": [ "Bars use two theme colors blended by step", "A step narrower than 6% of the first is drawn at 6% so it stays visible; its true share is written beside it", "Connectors mirror in right-to-left" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "funnel-1-loading", "trigger": "state=\"loading\"", "note": "Skeleton bars that narrow like the real funnel, under the real heading, announced as loading." }, { "id": "empty", "title": "No data yet", "example": "funnel-1-empty", "trigger": "state=\"empty\" (or segments={[]})", "note": "Says the funnel appears once visitors move through the steps; emptyState sets the copy." }, { "id": "error", "title": "Could not load", "example": "funnel-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry)." } ], "examples": [ "funnel-1-demo", "funnel-1-single", "funnel-1-loading", "funnel-1-empty", "funnel-1-error" ], "url": "https://ui.ballmac.com/components/funnel-1" }, "categories": [ "blocks", "funnel" ], "type": "registry:block" }