dashboardcn

Search documentation

Search for a page or component.

Funnel Chart Card

PreviousNext

A conversion card with a flow funnel: a headline value with delta, a range picker that carries its own steps, and a tile per stage. Hovering a stage swaps the headline.

Sign-up funnel
197
+5.2%vs previous period
100%
56%
39%
19%
Link opened197
Started110
Completed77
Converted38
import { FunnelChartCard } from "@/registry/dashboardcn/blocks/funnel-chart-card"

const colors = {

Installation

pnpm dlx shadcn@latest add @dashboardcn/funnel-chart-card

Also installs card, button, dropdown-menu, tooltip from shadcn/ui if missing.

Usage

import { FunnelChartCard } from "@/components/funnel-chart-card"

// A static funnel with a caption.
<FunnelChartCard
  title="Sign-up funnel"
  caption="Last 7 days"
  delta={0.052}
  deltaLabel="vs previous period"
  steps={[
    { name: "Link opened", value: 197, color: "var(--color-lime-400)" },
    { name: "Started", value: 110, color: "var(--color-blue-500)" },
    { name: "Completed", value: 77, color: "var(--color-violet-500)" },
    { name: "Converted", value: 38, color: "var(--color-pink-500)" },
  ]}
/>

// Or a range picker where each range carries its own steps and delta.
<FunnelChartCard
  title="Sign-up funnel"
  ranges={[
    { value: "7d", label: "Last 7 days", steps: week, delta: 0.052 },
    { value: "30d", label: "Last 30 days", steps: month, delta: 0.118 },
  ]}
/>