shadcn.io is not affiliated with official shadcn/ui
Pipeline Stage Strip Stats Block for Solid
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.
Installation
Overview
A pipeline strip for Solid with Ark 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.