shadcn.io is not affiliated with official shadcn/ui
Artist Comparison Music Block for Ark UI
Two Selects pick artists from four, six metrics are drawn as diverging bars from a centre axis, and a Toggle Group of four weightings decides the verdict, worked out from who leads on how many metrics.
Installation
Overview
Let people settle which of two artists is ahead, and on what, with this comparison for React with Ark UI. It shows Dueloft, an artist stats tool, in a hairline frame with a plus mark on each corner. Two Selects choose the artists from four, and six metrics (monthly listeners, followers, saves per listener, growth over 90 days, tracks released, shows booked) are drawn as diverging bars from a centre axis, the first artist towards the start and the second towards the end, each scaled so the larger of the two is a full bar. The values sit at the ends in compact notation and the leader's side says "Ahead". A Toggle Group at the foot picks how much each metric counts (Reach, Engagement, Growth or Even), and the verdict is worked out from it: who leads, on how many of the six, and the weight each side holds. On a phone the bars stay and the values drop under them. It's built from Select, Toggle Group and Guides, with a CSS entrance only. For artist tools, label dashboards and any head-to-head.
FAQ
How do I compare my own artists?
Edit ARTISTS and ARTIST_ITEMS. An artist has an id, a name, a genre line and six values in the order of METRICS: the counts in whole numbers and the two percentages in tenths, so 62 is 6.2%. The bars, the values, the leader of each metric and the verdict are all worked out from them. Add a metric by adding it to METRICS, a value to every artist and a weight to every set in WEIGHTINGS.
How is the verdict worked out?
Each weighting is a typed set of six weights that add up to 100. For every metric, the artist with the larger value holds that metric's weight. The verdict names whoever holds more, says how many of the six metrics they lead and writes both totals, for example "weighted 65 to 35". Equal totals read as level. Each row also shows what its metric counts under the chosen set.
How are the bars scaled?
Each metric is scaled on its own: the larger of the two values is a full half-bar and the other is its share of that, so a count in millions and a percentage can sit in one panel. The bars are decoration and hidden from a screen reader; the values, with the artist's name, and the word "Ahead" are real text.
What if both Selects are on the same artist?
They cannot be. Choosing the artist that is already on the other side swaps the two, so the comparison always has two different artists.