shadcn.io is not affiliated with official shadcn/ui
Split Subvalues Hero Metric Stats Block for Svelte
A parcel carrier's weekly total in display type at the start of a split, with its three service levels as rows at the end, each with its count and a share bar, so the shares add up to exactly 100%.
Installation
Overview
A hero metric with its parts for Svelte with Ark UI. A split: at the start, the week's parcel count in display type ("48,210 parcels shipped this week") that rolls up once, a pill for the change on last week, a sentence, and at the foot a line that shows the shares as a sum ("65% + 29% + 6% = 100%"). At the end, past a divider that runs up to the page's top rule, the three service levels (Standard, Express and Freight) are rows, each with its parcel count, its share of the total and a bar. The headline is the sum of the parts, and the shares are rounded with a largest-remainder rule so they always add up to exactly 100%, which plain rounding doesn't guarantee (65.2 + 29.4 + 5.4 would show 99). The total, the shares and the change are computed from one typed list of parts. On a phone the figure comes first and the rows follow. It's built from Progress, SlidingNumber, Badge and Guides.
FAQ
How do I change the parts?
Edit LEVELS at the top of the file: each level has a label, the parcels now and the parcels before (last week). Add or remove levels freely; the total, each share, the bars, the change on last week and the sum line are computed from the list. The bars show each level's share of the total, not its progress toward a goal.
Why do the shares always add up to 100%?
sharesOf rounds every share down, then gives the percent points that are left over to the parts with the biggest remainders. Rounding each one to the nearest whole number can total 99 or 101, which looks like a mistake beside a headline that is exactly the sum of its parts. The bar and the text use the same whole numbers.
Is it accessible?
Yes. The headline is the h2, so a screen reader hears "48,210 parcels shipped this week". The rows are a description list (a term for the level, its count and share as the description) and each bar is a progress bar named with the level, the count and the share. The arrow in the pill is hidden from assistive technology; its sign says the same. Numbers sit in bdi elements and the sum line is kept left to right.
How does the divider reach the top rule?
The page column is the split itself, so the cells carry the padding and the divider is a start border on the second cell, running from the top rule to the foot of the block. On a phone the divider becomes a rule with + marks between the figure and the rows. The rows end the block, so there is no bottom rule: the next section's top rule closes it.