shadcn.io is not affiliated with official shadcn/ui
Genre Explorer Music Block for React
A genre family tree of 16 nodes with a five-dot popularity row on each, Expand all and Collapse all, and a detail cell with the parent, two sentences, sub-genre chips that select and three invented artists with play toggles.
Installation
Overview
Let people walk from a big genre down to the small ones, with this guide for React with Base UI. It shows Taxonote, a genre guide, in a hairline frame with a plus mark on each corner and a list cell at the start. The Tree View walks three families (Electronic, Rock and Jazz), their genres and sub-genres, 16 nodes in all, each with a five-dot popularity row, and Expand all and Collapse all Buttons sit above it. Choosing any node fills the cell at the end with its name, its parent, the popularity as dots and as "Popularity 64 of 100", two sentences, its sub-genres as chips that select and open the tree to them, and three invented artists with a drawn cover and a Toggle on one track each. The detail keeps its height from node to node. On a phone the tree sits above the detail in a short scroll region. It's built from Tree View, Toggle, Button and Guides, with a CSS entrance only. For genre guides, music wikis and library filters.
FAQ
How do I add my own genres?
Edit GENRE_LINES. Each line is an id, the id of the parent (empty for a family), a name, a popularity out of 100, two sentences and three artist;track pairs. The tree, the dots, the sub-genre chips and the "Parent" line are built from those lines, and BRANCHES is worked out for Expand all. A family can have any number of genres and a genre any number of sub-genres, to the three levels the tree draws.
What happens when I choose a node?
The detail follows the choice and the tree highlights it. Choosing a family or a genre also opens or closes it, as in any tree. A sub-genre chip chooses that genre and opens its parents so the row is in view. Focus stays where you put it, and a polite status line says what was chosen and its parent.
Is anything played, and what stays local?
No. The toggle on an artist's track lights three pulsing bars on that row and says "No audio in this demo". The genres are real ideas, but the artists, tracks and popularity figures are made up. To make it real, load the tree and each node's artists from your catalog and play a preview from the toggle's handler.
How do I use the tree from the keyboard?
Tab into the tree and use the arrow keys: up and down move between rows, and right and left open and close a branch. Enter chooses the focused row. Home and End jump to the first and last. In a right-to-left page the open and close keys swap and the chevron turns.