shadcn.io is not affiliated with official shadcn/ui
Label Dashboard Music Block for Radix UI
A record label's back office: a strip of four figures, a roster whose rows are radios, twelve monthly columns stacked by artist, a label share slider that works out what the label keeps and each artist receives, and the next three releases.
Installation
Overview
Show a small label how its roster is doing and what each artist takes home, with this label dashboard for React with Radix UI. It draws Imprintly's back office in a hairline frame with a plus mark on each corner. A strip of four figures comes first: tracks, streams, twelve-month revenue and the top performer, all worked out from the roster. Below it the roster is a native table whose rows are radios, five artists with releases, streams, revenue and what each receives, and choosing one highlights that artist in twelve monthly columns of revenue stacked by artist, drawn in plain HTML with the other artists quiet. A side cell holds a Label share Slider from 10 to 50 percent and a readout of what the label keeps and what the artists receive, for the whole roster and for the artist you chose, then lists the next three releases with their dates and how many days away they are. Money is kept in integer cents and the label's cut is rounded half up per artist, so the parts always add up. It's built from Slider and Guides with a CSS entrance only. For label back offices, artist managers and any split between a house and the people it pays.
FAQ
How do I load my own roster?
Edit ARTISTS: each artist has an id, a name, releases, tracks, streams for the last twelve months and months, twelve revenue figures in cents from the oldest to the newest. UPCOMING holds the next releases with ISO dates, and AS_OF is the date the "in N days" words count from. The figures strip, the table, the columns and the readout are all worked out from those lists, so nothing is typed twice. In your app replace the constants with your reporting data and keep the arithmetic in cents.
How is the label share worked out?
For each artist the label keeps the share of that artist's twelve-month revenue, rounded half up to the cent, and the artist receives the rest. The whole-roster line adds the artists' parts, not a rounded total, so "keeps" and "receive" always sum to the revenue figure. Moving the slider updates every number at once; when you let go, a screen reader hears the sentence for the roster ("At 30%, the label keeps $… and artists receive $…").
How do I choose an artist, from the keyboard too?
The name cell of each row holds a native radio, so the whole table is one radio group: Tab to it, then use the arrow keys to move between artists. The chosen row is tinted, the chart redraws with that artist solid, and a polite status line says who is showing. Because the radios are native there is nothing to wire up for assistive technology.
Is the chart readable without seeing it?
Yes. The columns are an image with a label that gives the total and the chosen artist, and a table with the same twelve months, the roster total and the chosen artist's figure sits in the page for screen readers. The columns use weights of the foreground colour, not hues, so it reads in any theme and in print.
What stays local, and how do I make it real?
All of it. The artists, revenue and release dates are typed examples and nothing is fetched or sent. Moving the slider only changes the readout; it does not change any contract. To make it real, load the roster from your accounting system and write the label share to the artist's contract record in your API.