Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Pipeline Stage Strip Stats Block for React

A sales pipeline as five chevrons as wide as the deals in each stage, in deepening weights, with the deals and their value in a cell under each and the stage worth the most picked out.

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

A pipeline strip for React with Base UI. A start-aligned header names the stage that holds the most value ("Proposal holds the most value, $2.1M") and the quarter's week. Under it one band, running from rail to rail, ends the block. At its top five chevrons, each as wide as the deals in its stage, point from the leads at the start to the deals closed at the end, in weights that deepen along the way, with light text on the two darkest. Under every chevron its cell shares vertical hairlines with its neighbours and gives the deals and what they are worth together; the stage worth the most is a tinted cell with a "Most value" badge. The chevrons and the cells use one set of columns, so a cell always sits under its stage. On a phone the strip stands up: five notched bars, one per stage, each with the same two figures under it. The widths, values and headline are computed from the deals at each stage and their average size. It's built from Badge and Guides, with every fill a weight of your theme's foreground colour.

FAQ

How do I change the stages, the deals and the values?

Edit STAGES at the top of the file: each stage has a name, the number of deals, the average deal size in dollars and a fill for its chevron. The column widths (COLUMNS), the value of each stage, the stage with the most value, the badge and the headline are computed from those. Add or remove a stage and the strip and the cells follow.

How is a chevron's width worked out?

A stage's column is as many fractions of the strip as it has deals, but never narrower than 8.5 rem, the room a name and two figures need. So the lead stage is the widest and the last is the narrowest, and a very small stage stays readable. The strip and the cells below share the same columns, so they line up at every width.

How are the chevrons cut, and do they work in a right-to-left page?

Each chevron is a box cut with clip-path: the first has a flat start, the last a flat end, the others a notch at the start and a point at the end, with a gap of the same width between them. The cut is a drawn shape in the strip, which is always left to right, like the funnel it draws. Names and figures follow the page's direction.

Is it accessible?

Yes. The stages are an ordered list: each has a heading and a description list of deals and value, so a screen reader reads "Proposal, Deals 150, Value $2.1M". The shape is decoration. The most valuable stage is marked with the word "Most value", not only with a tint. The dark chevrons carry light text, and contrast passes in light and dark.

How does it fit on a phone?

Below 768 pixels the chevrons become five full-width bars cut with a notch at the top and a point at the bottom, each followed by its two figures side by side, so the pipeline reads top to bottom. Nothing scrolls sideways at 320 pixels.

What moves?

The header and the band fade up once on load. With reduced motion nothing moves.

  • Pro

    Revenue Funnel Stats

    Funnels

    A funnel as a real table for a sales team's pipeline: stage, deals, step conversion and value, each number with a thin bar to the scale of its column, and the overall conversion rolling in the header.

  • Pro

    Vertical Stages Funnel Stats

    Funnels

    A checkout funnel as five left-anchored bars with a connector row between each that says how many were lost, beside the overall conversion as a big number and the stage that leaks the most.

  • Pro

    Stage Icons Funnel Stats

    Funnels

    A column funnel for a signup-flow analyser: five columns shrinking from the start to the end on a baseline, an icon plate under each as the step's node, and the share that made it across between two nodes.

  • Pro

    Connected KPI Bar Stats

    KPI bands and tiles

    Four headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.

  • Pro

    Stacked Percentage Bar Stats

    Parts of a whole

    One thick bar of a consultancy's week split into four segments at four weights with labels inside the wide ones, and a band of four legend cells under it; pointing at or focusing a cell brackets its segment.

  • Pro

    Ratio Tile Grid Stats

    Goals and progress

    Four goal tiles for a publishing house, each a ratio like 11 of 16, a progress bar and a pace tick that marks where the plan says the goal should stand today, with how many days ahead or behind it is.

All 122 stats blocks