Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sales Pipeline Dashboard Block for Radix UI

Pipeline coverage against a quota: four stages with deal counts, value and chance, a bar of closed plus weighted open pipeline toward the quota, and a Quota field that re-works coverage and the Qualified pipeline still needed.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See whether the pipeline can carry the quarter, with this sales pipeline panel for React with Radix UI. A hairline frame with a plus mark on each corner opens with a Quota field, then four Funnelhaus stages (Lead, Qualified, Proposal and Closed) as ruled rows with their deal count, value, a bar to scale, the chance a deal in the stage closes and its weighted value. Under them, a bar shows closed deals plus the weighted open pipeline toward the quota, with a tick at the quota itself, next to one headline figure: the coverage of what is still to win, and how much more Qualified pipeline reaches 3x. Typing a new quota in the Input re-works every figure on each keystroke. It's built from Input and Guides, with hand-built bars. For sales leads, revenue operations and quarterly forecast reviews.

FAQ

How do I fill it with my pipeline?

Edit STAGES: each stage has its deals, their total value in dollars and the probability that a deal in it closes. DEFAULT_QUOTA is the starting quota and TARGET the coverage you want, 3 by default. Weighted values, coverage, the gap and the forecast are all worked out from those, so there is nothing else to keep in step.

How is coverage worked out?

Coverage is the open pipeline (everything not yet closed, at full value) divided by what is still to win, which is the quota minus the closed deals. The forecast is a different number: closed deals plus each open stage's value times its chance. The sentence says how much more Qualified pipeline would bring coverage to the target, and says so plainly when the quota is already met.

What does the Quota field accept?

Whole dollars. Commas, spaces and letters are ignored, and Arabic-Indic digits are read as ordinary ones. An empty field or zero keeps the previous default in use and the status line says so.

What stays local, and how do I wire it for real?

Everything: the stages are typed, the quota is a field in this page and nothing is saved or sent. To make it real, load the deal counts and values per stage from your CRM, take each stage's chance from your own win rates by stage, and read the quota from the same place your targets are set.

How does it look on a phone?

The quota field stays on top, each stage becomes a row of three lines (name and value, the bar, then chance and weighted value) and the bar toward the quota follows with its legend.