dashboardcn

Search documentation

Search for a page or component.

Stage Bars Card

PreviousNext

The funnel as a list: a rounded bar per stage with its name, value, and share of the first stage, a range picker, and a tile per stage.

Pipeline
1,180
+2.4%vs previous period
Visits
1,180100%
Sign-up
79067%
Active
46039%
Pro
25021%
Team
12010%
Enterprise
403%
Visits1,180
Sign-up790
Active460
Pro250
Team120
Enterprise40
import { Building2, Crown, Eye, UserPlus, Users, Zap } from "lucide-react"

import { StageBarsCard } from "@/registry/dashboardcn/blocks/stage-bars-card"

Installation

pnpm dlx shadcn@latest add @dashboardcn/stage-bars-card

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

Usage

import { StageBarsCard } from "@/components/stage-bars-card"

<StageBarsCard
  title="Pipeline"
  caption="Last 30 days"
  delta={0.024}
  stages={[
    { name: "Visits", value: 4820, icon: <Eye /> },
    { name: "Sign-up", value: 3260, icon: <UserPlus /> },
    { name: "Active", value: 2010 },
    { name: "Pro", value: 1160 },
    { name: "Team", value: 540 },
    { name: "Enterprise", value: 180 },
  ]}
/>