shadcn.io is not affiliated with official shadcn/ui
Musician Discography Profile Block for Solid
A musician profile as a discography: a cover band of four drawn typographic covers over the musician, an accordion of albums, and for the open album its tracks with lengths, stream bars scaled to its top track and a star on the most streamed.
Installation
Overview
Give a musician a page of albums with no player, with this discography profile for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on a cover band: four drawn, typographic covers (greys, a title and one shape, never an image) in a strip about 80 pixels tall, with the musician over it: initials, name, role and place, the instruments as chips and the monthly listeners. Under it an Accordion lists four albums, one open at a time: a closed row gives a small cover, the title, the year and the number of tracks; the open one gives the album's totals (tracks, length and streams, summed from its tracks) and a numbered list of tracks with their lengths and a stream bar scaled to the album's most streamed track, which wears a star. An unseen copy of every row and panel holds the panel's height, so choosing an album moves nothing. On a phone the stream bars drop and the lengths stay. There is no play control: nothing plays. It's built from Accordion, Badge, Avatar and Guides with CSS only. The musician, the albums, the tracks and the counts are invented. For an artist-pages service, a musician's own site or any profile that lists releases.
FAQ
How do I fill it with my own albums?
Edit ALBUMS in the Ark file: each album has a title, a year, a cover look (slate, dusk, paper or night, which sets its greys and its one shape) and its tracks as [title, seconds, streams] rows. The album's length and stream total, the most streamed track, the stream bars and the track counts are all worked out from the rows. PERSON holds the name, the instruments and the monthly listeners.
How are the covers made, and can I use real artwork?
Each cover is a few spans in the cover's own greys, a title set in container-relative text and one drawn shape, all hidden from assistive technology; the strip and the small cover in each row are the same component at two sizes. They are a printed object, so they keep the same greys in a dark theme. In your app swap Cover for an img of the real artwork (with empty alt text, since the album's title is beside it) and keep the rest.
How does the accordion work, and can I open two albums?
One album is open at a time and one is always open, so the panel never collapses and its height holds. Pressing a row opens it and says so in the status line ("Opened Harbour Arithmetic: 9 tracks, 38:20."). The arrow keys move between the album rows. To allow several open at once, switch the accordion to its multiple mode and drop the unseen copy's single-panel sizing.
What do the stream bars and the star mean?
Each bar is that track's streams over the album's most streamed track's, so the longest bar is always full, and the figure beside it is the same number in compact form. The star marks that most streamed track (and a screen reader hears ", most streamed"); the line under the list says what the star means. The bars are decoration that repeats the numbers, so they are hidden from assistive technology and dropped on phones.
Is it accessible?
The albums are a real list of accordion rows, each trigger inside a heading, and the tracks are an ordered list named for the album. The covers are decoration. The status line is a polite live region present from the start, the star has a spoken equivalent, and the entrance is a CSS fade that stops under reduced motion. Numbers and lengths stay left to right in a right-to-left layout and names are isolated.
What stays local, and how do I wire it to real data?
Everything: opening an album only changes the page and the status line, and there is no player, no streaming link and no audio. To wire it up, pass your releases and track stats into ALBUMS (a server component can do it), keep the helpers that sum and scale, and add real links or players to the rows in your own app.