Funnel

Funnel chart where dots fall through the stages in proportion to conversion and drop-outs turn red and drift off the side.

View as Markdown

<hf-funnel>· loading

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-funnel>

Props

dataremounts

<HfFunnel data="Visited:12400,Signed up:4210,Activated:2380,Paid:910" />

Installation

pnpm dlx shadcn@latest add @lumesec/hf-funnel

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-funnel.json

Usage

import { HfFunnel } from "@/components/lumesec/hf-funnel";

export function Example() {
  return (
    <HfFunnel data="Visited:12400,Signed up:4210,Activated:2380,Paid:910" />
  );
}

Behaviour

Dots fall through the stages in proportion to conversion; the ones that drop out turn red and drift off the side.

API reference

Attributes

dataReact propdataTypestringDefaultVisited:12400,Signed up:4210,Activated:2380,Paid:910

Comma-separated Label:count stages, top to bottom. Each stage width is relative to the first, with a 6% minimum.

Properties

stages (read-only)TypeArray<{ label: string, v: number }>

Stages parsed from the attribute.

Accessibility

The canvas has role="img" and an aria-label listing each stage and count.
Each row shows the stage, its count and the conversion from the previous stage as text.
Isolating a stage works by pointer hover only.
Reduced motion: no particles are drawn and the stages appear at full width without growing.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg and --ui-muted.

Notes

Stages should be in descending order: the drop-out rate between two stages comes from their ratio.
Each stage row is 44px tall, so the height follows the number of stages.
data is not observed; the text rows are built once on connect.

<hf-area>

<hf-donut>

<hf-stat>

<hf-barlist>

Was this page helpful?

Related