Funnel Chart
Show how values narrow through successive stages.
Preview
Import
import { FunnelChart } from "@sigil-ui/components";Usage
<FunnelChart
steps={[
{ label: "Visitors", value: 10000 },
{ label: "Signups", value: 3200 },
{ label: "Active", value: 1800 },
{ label: "Paid", value: 450 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | FunnelStep[] | — | — |
showRates | boolean | true | Show conversion rate between steps. |
showValues | boolean | true | Show absolute values. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-radius-sm | Radius sm |
--s-duration-fast | Duration fast |
--s-primary | Primary |
--s-primary-contrast | Primary contrast |
--s-shadow-sm | Shadow sm |