shadcn.io is not affiliated with official shadcn/ui
Song Credits Music Block for Radix UI
A song's credits as 23 typed rows that a Segment Group regroups by role (Performance, Songwriting, Production, Engineering, Studio) or by person with roles as chips, with a derived count and Copy credits.
Installation
Overview
Let people read who made a recording, in the grouping they need, with this credits panel for React with Radix UI. It shows one song from Scribelist, a credits database, in a hairline frame with a plus mark on each corner. The first band has a drawn cover, the title and artist, and a list of facts: album, length, label, release date and the ISRC in monospace. Under it a Segment Group regroups the same 23 credits. By role lists the roles under Performance, Songwriting, Production, Engineering and Studio with the people who hold each one, and By person lists every name once with their roles as Badges. The count ("15 names, 23 credits") is worked out from the rows, and both views are drawn in one cell, so the panel never changes height when you switch. Copy credits puts the current grouping on the clipboard as plain text. It's built from Segment Group, Badge, Button and Guides, with a CSS entrance only. For music databases, release pages and liner notes.
FAQ
How do I add my own credits?
Edit PEOPLE_LINES, CREDIT_LINES and GROUP_LINES. A person is an id and a name, a credit is a group, a role and a person id, and a group is an id and a label. Both views are built from the credit lines: a role lists everyone who holds it in order, and a person lists their roles in order. The count in the toolbar is the number of people and credits found. The song's own facts are in SONG and ISRC.
What does Copy credits copy, and what stays local?
It writes the title, artist, album, label, date and ISRC, then the credits in the grouping that is showing, to the real clipboard, and the status line says how many were copied or that the browser blocked it. Nothing else leaves the panel: the song, the people and the ISRC are made up, and the ISRC is not a real recording. To make it real, load the credits from your catalog API.
Why are both views in the DOM?
The two views are drawn in one grid cell and only one is visible, so the panel is as tall as the taller view and switching never shifts the content below. The view that is not showing is hidden from sight and from assistive technology and cannot take focus.
How is the ISRC shown?
In monospace and always left to right, even in a right-to-left page, because a code is read in one order. It is only a fictional code here, in the shape of a real one: a country code, a registrant, a year and a number.