shadcn.io is not affiliated with official shadcn/ui
Library Browser Music Block for React
A music library of 24 songs seen in four tabs (a sortable songs table with play toggles, an albums grid of drawn covers, artists with counts and genres with shares), one search that marks the words it found, and four derived figures.
Installation
Overview
Let listeners move around their collection, with this library browser for React with Base UI. It puts one typed library of 24 songs in a hairline frame with a plus mark on each corner, under a band of four figures worked out from the songs: how many songs, albums and artists, and the total time. Tabs switch the lens. Songs is a sortable table with Title, Artist, Album and Time heads that carry their sort state, and a Toggle on every row that marks it playing with an equaliser; Albums is a grid of drawn covers with song counts and time; Artists are ruled rows with their song and album counts; Genres show each genre's songs and share of the library. One search box filters whichever tab is open and marks the matching letters with Search Highlight Text. Every tab holds the same height in a scrolling region, and a search with no match shows an Empty state inside it. On a phone the table folds artist, album and time into the title cell. It's built from Tabs, Toggle, Search Highlight Text, Empty, Input Group and Guides, with a CSS entrance only. For music players, collection apps and any library with more than one way in.
FAQ
How do I fill it with my library?
Edit ALBUMS (an id, a title, an artist, a genre and a drawn cover) and LINES, one song a line as album|title|seconds, with an artist and a genre added when a song differs from its album, as the split record does. Songs, artists and genres are built from those lines, and the four figures, every count and every share are worked out from them, so nothing is typed twice.
How does sorting work?
The Title, Artist, Album and Time heads are buttons. The first press sorts ascending, the next descending, and the head that is sorted carries aria-sort with an arrow that says the same. Sorting applies to the Songs tab and the status line announces it; the search keeps working on top of it.
How does the search work across tabs?
It filters the tab that is open: songs by title, artist or album, albums by title or artist, artists and genres by name. Each tab's own count updates, the matching letters are marked, and a search with no match shows the empty state with a Clear search button inside the same fixed-height region, so the panel does not jump when you switch tabs or type.
Does the play toggle play anything?
No. It marks one row as playing, shows an equaliser beside it and says "No audio in this demo" in the status line. To make it real, start your audio element or queue from the toggle's handler and keep the pressed state in sync with the player.
How do I use it from the keyboard?
Tab reaches the tab list (arrow keys change tab), the search box, and then the scrolling region, which takes focus so the keyboard can scroll it; inside the Songs table the sort heads and every Play toggle are buttons. Each toggle is named with its song, such as "Play Window Seat".