shadcn.io is not affiliated with official shadcn/ui
Step Tags KPI Bar Stats Block for Vue
Four lifecycle figures for an email tool, each cell tagged with its step on its top rule (1 Reach, 2 Trial, 3 Paid, 4 Renew) and showing how much of the step before it carried on.
Installation
Overview
A KPI bar of step tags for Vue with Ark UI. A start-aligned header states the headline number, "902 readers became paying customers in March", and under it four cells sit a little apart, each in a hairline frame whose lines run past its corners. A small outlined tag breaks each frame's top rule and names the step: 1 Reach, 2 Trial, 3 Paid, 4 Renew. Under the tag the value rolls up, then its label, then how much of the step before it carried on ("7.5% of readers reached", "25.0% of trials started", "86.0% of plans up for renewal"), so the four cells read from the start to the end as a journey. Every value and share is computed from one typed set of counts, so the text can't disagree with itself. The cells are an ordered list, with the step in the tag, and the block has no colour for good or bad. Four across from lg, two by two below it, tags kept. For a lifecycle, funnel or growth page.
FAQ
How do I change the steps or the figures?
Edit COUNTS and STAGES at the top of the file. COUNTS holds the month's counts; each stage in STAGES has a tag, a label, the value it shows and the count its share is taken from (0 for the first step, which has no share). The share is computed as the value over that count, to one decimal. Add a fifth stage and the grid is ready for it from lg if you change lg:grid-cols-4 to lg:grid-cols-5; the headline reads COUNTS.paid.
How does the tag break the line?
Each cell is a relative list item with a Guides component for its frame (lines that run past the corners, which is why the cells keep a gap-6 between them). The tag is an outlined Badge placed on the top rule with -top-3 and a bg-background fill, so it covers the line behind it. It's sentence case rather than the uppercase, letter-spaced label that stat blocks often carry.
How do the numbers roll, and what if motion is off?
Each value is the catalog's Sliding Number with trigger="view": it waits at zero and rolls its digits up once the cell scrolls into view. With reduced motion the digits change in place, and screen readers always read the final value, never the digits in between. The numbers use tabular figures so the cell doesn't shift.
Is it accessible?
Yes. The steps are an ordered list; each cell's tag names its step, and its figures are a description list: the label is a term, and the value and the share are its descriptions. The value is drawn first but read after its label. Values and shares sit in bdi elements, so a right-to-left page keeps the percent signs where they belong.