shadcn.io is not affiliated with official shadcn/ui
Top Charts Music Block for React
A weekly top ten with a week Select, All, Climbers and New filters, and a table of rank, movement, track, weeks on chart and peak, all worked out from each week's typed order, with a row play toggle.
Installation
Overview
Let people read a chart the way a chart tracker does, with this top ten for React with Base UI. It shows Ranklift's ten most streamed tracks of a week in a hairline frame with a plus mark on each corner. A Select in the header picks one of four weeks, and a Toggle Group in the first band filters the rows to All, Climbers or New without changing the panel's height. On a desktop a Table gives each row its rank, its movement against the week before (an arrow and a signed number, or New, Re-entry, or a dash), a drawn cover with the title and artist, the weeks on the chart and the peak, and a Toggle that lights three bars on the playing row. Movement, weeks and peak are worked out from the typed order of each week. The number-one row is larger and says how many weeks in a row it has led. On a phone the same rows become a list that keeps rank, movement, title and play. It's built from Select, Toggle Group, Table, Toggle and Guides, with a CSS entrance only. For chart pages, streaming apps and label dashboards.
FAQ
How do I load my own chart?
Edit TRACKS and WEEKS. A track has an id, a title, an artist, a drawn cover and how many weeks it was on the chart before the first one listed. A week is its number, the Sunday it ends on and an order list of track ids with number one first. Nothing else is typed: movement, weeks on the chart, the peak and the length of a run at number one are all worked out from those lists. The week before the first one you offer is kept in WEEKS so its movement can be worked out.
How is movement worked out?
A track that was on the previous week's chart moves by the difference of the two ranks, shown as an arrow and a signed number, or a dash when it did not move. A track that was not on it is New if it has never charted and Re-entry if it has. The words are also in the row for a screen reader, for example "Up 3" or "Back on the chart". Up and down are an arrow and a number, never a color.
What do the filters do to the table?
Climbers keeps the tracks that moved up and New keeps the tracks that have never charted. The panel keeps the height of ten rows whichever is on, so choosing a filter never moves the page, and a filter with no matches says so in the space the rows would take. A polite status line says how many rows are shown.
Does anything play, and what stays local?
No. The play toggle lights three pulsing bars on its row and says "No audio in this demo". Only one row plays at a time. The chart, the covers and the counts are typed data. To make it real, load each week from your API and start your player from the toggle's handler.