shadcn.io is not affiliated with official shadcn/ui
Artist Profile Music Block for React Aria
An artist page head with an initials tile, a Verified glyph, genre badges, followers, monthly listeners and a derived ranking, a Follow toggle that adds one, five popular tracks that expand to ten, and an About Collapsible.
Installation
Overview
Let a listener meet an artist and decide to follow them, with this page head for React with React Aria. It shows an artist page from Oakbarrel in a hairline frame with a plus mark on each corner, in three bands. The first has an initials tile, the name with a Verified glyph and the word, genre Badges and three figures: followers, monthly listeners and a ranking worked out from a typed rank ("14th in Folk"). Follow is the one primary, a Shine Button that is a toggle: it says Following when on, adds one to the followers, and takes it back when pressed again, with a polite status line. The Popular band lists five tracks with a number, a drawn cover, the title, the plays in compact notation, a bar scaled to the top track and a row Toggle that lights three bars, and a Collapsible shows ten. About is a second Collapsible with the bio. It's built from Shine Button, Collapsible, Toggle, Badge, Avatar and Guides, with a CSS entrance only. For artist pages, streaming apps and fan sites.
FAQ
How do I load my own artist?
Edit ARTIST and SONGS. The artist has a name, initials, genres, followers, monthly listeners, a rank and the list it is ranked in, and a bio. A song has an id, a title, a drawn cover and its plays. The compact counts, the ordinal in "14th in Folk" and the bar widths, which are scaled to the top track, are all worked out from those numbers. Where you have artwork, swap the drawn cover for an image and keep the title beside it.
What does Follow do, and what stays local?
It toggles in this tab only. The button is a toggle with aria-pressed, its label changes between Follow and Following, the followers go up by one and back, and a polite line says so. Nothing is saved or sent, and the artist, tracks and figures are made up. To make it real, send the follow to your API from the click handler and take the count from its response.
Does anything play?
No. A row's toggle lights three pulsing bars on that row and says "No audio in this demo". Only one track plays at a time. Play your own preview from the toggle's handler.
How do Show 10 and About work?
Both are collapsible regions. Show 10 opens the other five tracks under the first five and changes to Show 5, and About opens the bio in place. Closed regions cannot take focus and the panel keeps its height until you open one.