shadcn.io is not affiliated with official shadcn/ui
Share Bar Customer Segments Block for Vue
A framed 100% bar of a customer base in three segments, with one column per segment saying who they are, how big they are and what they use.
Installation
Overview
A customer-segments block for Vue with Ark UI, written for Plumeline, a fictional lifecycle-email service for online businesses. Under a compact header, a framed bar shows how 4,800 senders divide into Solo shops, Growing teams and Large lists. Each share is a whole number worked out by the largest-remainder method, so the three always add to 100. Below the bar, the three segments are columns in the bar's own order, each headed by the bar's label and described by a short list: who they are, how big they are and what they use. From lg the columns are cells whose lines overshoot their corners; below it they are bands ruled from rail to rail. A quiet line and a link close the block. It is static, built from Guides, and every figure is example data.
FAQ
How are the shares worked out?
Each segment's count is divided by the total and its share rounded down. The points left over then go, one each, to the segments with the largest remainders, so the whole numbers add to exactly 100. Change the counts in SEGMENTS and the bar, its label and the columns all follow.
How does a screen reader get the bar?
The bar is a single image with a name that lists every segment and its share, and the same numbers are text in each column. Nothing is only in the colour: segments differ in weight, and each column starts with its own name.
Can I use two or four segments?
Yes. The bar sizes each part from its share, and the columns come from the same array. The grid is written for three columns on wide screens, so for another count change lg:grid-cols-3 to match.
What happens on a phone?
The bar stays whole and readable, then the columns stack as bands, each ruled from rail to rail, in the same order as the bar.