Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Pipeline Deals Dashboard Block for Ark UI

A table of six open deals with amount, stage and chance, where Advance moves a deal to the next stage, and a side cell that stacks the weighted forecast by close month and compares it with 11 Oct.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Move deals along and watch the forecast follow, with this deal forecast panel for React with Ark UI. A hairline frame with a plus mark on each corner holds six open Dealhearth deals in a table: company, the owner's initials, the month it should close, the amount, its stage and the chance that stage carries. An outline Button Advance moves a deal to the next stage (Discovery, Qualification, Proposal, Negotiation, Contract, Won) and sets its chance from a typed map, so the weighted value and the forecast change at once. The end side cell shows the weighted forecast, how far it is from the figure on 11 Oct, and the value stacked by close month. A Collapsible row lists the chances. It's built from Button, Badge, Collapsible and Guides. For sales teams and account reviews.

FAQ

How do I fill it with my deals?

Edit DEALS: each has a company name, an amount in dollars, an expected close month as an ISO month, the owner's initials and a starting stage. STAGES holds the stages in order with the chance each one carries, and PRIOR_FORECAST is the earlier figure the side cell compares with. The weighted values, the monthly stacks and the change are worked out.

What does Advance do?

It moves the deal one stage on, shows the new stage and chance in its row, and recalculates the forecast and the month it sits in. A deal that is Won stays put and its button reads Won; pressing it only says so in the status line. Reset deals puts all six back where they started.

Where do the chances come from?

They are typed in STAGES and shown in the collapsible row, not learned from anything. For a real forecast, replace them with your own historical win rates by stage, or give each deal its own probability.

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

Everything: the deals are typed, Advance changes a state in this page and nothing is written to a CRM. To make it real, call your CRM's stage update from advance, reload the deals afterwards, and keep the forecast comparison in a stored snapshot.

How does it look on a phone?

The table becomes a list of cards, each with the company, amount, owner, stage, chance and its own Advance button, and the forecast and the month stacks sit under them.

All 200 dashboard blocks