shadcn.io is not affiliated with official shadcn/ui
Top Performer Awards Block for Solid
Three award winners on shared hairlines, each with initials, a name, the award taken and two figures set against a team median, with the difference in words and a small bar.
Installation
Overview
A top performers block for Solid with Ark UI. A centred header sits over three cells that share their hairlines, three across from lg and one column below. Each cell is a person (initials in a circle, no photographs, name and role), the award they took as an outlined badge and two figures. Each figure is set against a team median: the person's value in large type, the difference worked out in words ("37% above the median"), a small bar on a track with a tick where the median falls, and the median itself in text. The bars are drawings; every figure is also in text. The page's rails and top rule come from the Guides spine. It's built from Guides, Avatar and Badge, with CSS transitions for the entrance. The people, awards and figures are made up for the example.
FAQ
How do I change the performers and their figures?
Edit PERFORMERS at the top of the file. Each person has a name, a role, an award and two metrics, each with a label, the person's value, the team median and a unit ("%" or nothing). The percentage above the median, the bar's length and the tick's place are all worked out from those numbers, so nothing else needs a change.
How is the difference worked out?
It is the person's value minus the median, divided by the median, rounded to a whole percent: 41 deals against a median of 30 is 37% above. It is relative to the median, not a number of points, and the block says so in its words. If lower is better for a measure of yours, change aboveOf and its sentence.
What do the bars show?
A bar runs from zero to the person's value on a track that reaches a tenth past the larger of the value and the median. The tick marks the median. The bars are drawings hidden from assistive technology: the value, the difference and the median are all in text beside them.
Does it work in a right-to-left layout?
Yes. The cells and text follow the page direction. The bars and ticks stay in a left-to-right box, so a longer bar always means a bigger value, and every figure sits in a bidirectional-isolation element so it keeps its order.