shadcn.io is not affiliated with official shadcn/ui
Top Artists by Range Profile Block for React Aria
A music listener profile with top artists by range: a start cell with the listener and facts from the history, and a segmented control that re-ranks ten artists in place with plays, a share bar and the move against the period before as a sign and an arrow.
Installation
Overview
Show what someone listens to most, over three ranges, with this top artists profile for React with React Aria. A compact header holds the title and one sentence, and the hairline frame under it is split in two. The start cell holds the listener (initials, name, since when and where) and three facts worked out from the history: the plays in the chosen range, its top artist, and the last song played with how long ago, counted from a fixed "now". The main cell is a Segment Group (4 weeks, 6 months, all time) over a ranked list of ten artists. Changing the range re-ranks them in place: every row keeps its slot and its height while its words change, with the plays, the share of the ten (a bar scaled to the leader and a percentage that adds to 100) and the move against the period before as a sign and an arrow ("↑ +2", "↓ −1", "– same", or "New"). On a phone the start cell becomes a short row above the list and each row's move drops under its plays. Nothing plays: the last-played line is a record, and there is no now-playing bar. It's built from Segment Group, Avatar and Guides with CSS only. The listener, the artists, the song and the counts are invented. For a listening-history app, a profile page or any ranking that changes with a period.
FAQ
How do I fill it with my own listening history?
Edit ARTISTS in the Ark file: each artist has a name and, for each range (w4, m6, all), a pair of numbers, the plays in that range and the plays in the period before it. The ranks, the moves, the shares, the totals and the top artist are worked out from the pairs. LAST_PLAYED and AS_OF_AT give the last song and "now", and the "2 h 18 min ago" is the difference between them.
How are the moves and the shares worked out?
Each artist is ranked by the plays in the range and again by the plays in the period before it; the move is the difference between the two ranks, shown as a sign and an arrow, and an artist with no plays before is marked "New". The percentage is each artist's plays over the ten's total, shares add to exactly 100 by the largest-remainder rule, and the bar is scaled to the leader so the longest bar is always full. The caption under the list says which period the moves are against.
Why doesn't the list jump when I change the range?
The rows are keyed by their place in the ranking, not by the artist, so changing the range changes the words in ten fixed rows instead of moving rows around. Each row is the same height, the bars animate their width (and not under reduced motion), and the status line says who leads ("6 months: Quiet Cartographers leads with 702 plays.").
Is it accessible?
The ranking is an ordered list named by the range, each row reads "rank, artist, plays, share" and its move is said in words ("Up 2 places", "No change", "New in the top ten") while the arrows themselves are hidden from screen readers. The segmented control is named by its heading. The status line is a polite live region present from the start. The numbers stay left to right in a right-to-left layout, the names are isolated, and arrows are text characters that do not mirror.
How does it look on a phone?
The listener row, the last-played line and the segmented control come first, then the ten rows with the move under the plays. The two summary facts (plays in the range, top artist) and the note are hidden on phones to keep the list near the top; the rows keep their bars and their numbers.
What stays local, and how do I wire it to real data?
Everything is typed sample data and changing the range only changes the page. There is no audio, no now-playing bar and no connection to a streaming service. To wire it up, load your history into ARTISTS for the three ranges (a server component can pass it in), keep the helpers that rank, compare and share, and replace the fixed "now" with the real time.