v2.0Utility

Activation Funnel Inline

Step-based funnel visualization showing an activation flow with per-step values and drop-off rates. Used to illustrate conversion or activation metrics in a marketing context.

View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Default - SaaS activation funnel

See this component used in context in the Threshold reference build.

Activation funnel

01Visited site

100%

02Signed up

62%-916

03Onboarded

44%-432

04First action

33%-265

05Activated

27%-145

Alternate - trial conversion funnel

Trial conversion

01Trial start

100%

02Day 3 active

71%-290

03Day 14 active

52%-194

04Converted

38%-140

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
steps	FunnelStep[]	required	Ordered array of funnel steps; each has label, value (0-100), and optional dropoff count
title	string	"Sample funnel"	Small uppercase title rendered above the rows
ariaLabel	string	auto-generated	Accessible label for the chart region; when omitted, a description is built from the steps array
className	string	undefined	Optional extra class name for the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/activation-funnel-inline/styles.css">

<div class="afi" role="img" aria-label="Activation funnel with 5 stages">
  <p class="afi__title">Activation funnel</p>
  <div class="afi__rows">

    <div class="afi__row">
      <span class="afi__index">01</span>
      <span class="afi__label">Visited site</span>
      <div class="afi__track">
        <div class="afi__bar" style="width: 100%"></div>
      </div>
      <span class="afi__value">100%</span>
    </div>

    <div class="afi__row">
      <span class="afi__index">02</span>
      <span class="afi__label">Signed up</span>
      <div class="afi__track">
        <div class="afi__bar" style="width: 62%"></div>
      </div>
      <span class="afi__value">62%</span>
      <span class="afi__dropoff">-916</span>
    </div>

    <div class="afi__row">
      <span class="afi__index">03</span>
      <span class="afi__label">Onboarded</span>
      <div class="afi__track">
        <div class="afi__bar" style="width: 44%"></div>
      </div>
      <span class="afi__value">44%</span>
      <span class="afi__dropoff">-432</span>
    </div>

    <!-- repeat for remaining steps -->
  </div>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.afi {
  --afi-title-color: var(--brand-muted, #4a5568);
  --afi-label-color: var(--brand-ink, #1f2d44);
  --afi-index-color: var(--brand-muted, #4a5568);
  --afi-track-color: var(--brand-surface-alt, #edeff2);
  --afi-bar-color: var(--brand-accent, #5b8b85);
  --afi-value-color: var(--brand-ink-strong, #0f1b2d);
  --afi-dropoff-color: var(--brand-danger, #a33b3b);
  --afi-mono-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --afi-bar-radius: 0.25rem;
  --afi-bar-height: 0.625rem;
  --afi-row-gap: 0.375rem;
  --afi-col-gap: 0.5rem;
  --afi-title-size: 0.625rem;
  --afi-title-tracking: 0.12em;
  --afi-label-size: 0.75rem;
  --afi-value-size: 0.75rem;
  --afi-dropoff-size: 0.625rem;
  --afi-index-width: 0.75rem;
  --afi-label-width: 5rem;
  --afi-value-width: 2.5rem;
  --afi-dropoff-width: 2.5rem;
}