shadcn.io is not affiliated with official shadcn/ui
AI Playlist Music Block for Radix UI
A playlist maker that reads a few typed words as rules, shows them as chips you can switch off, and lists up to eight matching tracks with a mood word, an energy meter and a tempo, with Regenerate variants and a local Save.
Installation
Overview
Turn a few words into a playlist, with this playlist maker for React with Radix UI. It shows Setsmith, a music app, as a header over a hairline frame with a plus mark on each corner, in four bands. The first is a Textarea of up to 120 characters with a counter, four example Buttons (Rainy-day focus, Sunday cooking, Night drive, Long run) and Generate, the only Shine Button. The second shows the rules read from the words as Toggle chips (a mood, an energy, a tempo range, a genre) that you can switch off one by one. The third lists up to eight typed tracks that satisfy every kind of rule, each with a drawn cover, a mood word with a glyph, a three-bar energy meter and its tempo. The foot holds Regenerate, which turns the same matches into variant 2 and 3 of 3, and Save playlist. No model runs: a fixed word list stands in for one, and the status line names the words it matched. It's built from Textarea, Toggle, Button, Shine Button, Empty and Guides, with a CSS entrance only. For music apps, playlist makers and any list built from typed filters.
FAQ
Is there a model behind it?
No. WORDS is a short list of words, each with the rules it stands for: "rainy" is a Wistful mood and Low energy, "run" is a Fast tempo and High energy, "jazz" is a genre. The prompt is split into words, the known ones become rules, and the tracks that pass every kind of rule are the result (rules of the same kind are alternatives, so "rainy focus" accepts Wistful or Chill). Unknown words are ignored, and the status line lists the ones that matched. To use a real model, send the prompt to it and map its answer to the same Rule objects, so the chips and the list keep working.
How do I use my own tracks and words?
Edit LINES for the tracks: id, title, artist, genre, tempo, energy from 0 to 4, mood from 0 to 4, length in seconds and a cover pattern. Edit WORDS for the vocabulary and TEMPOS for the tempo ranges. The mood word, the energy level and the totals are all worked out from those numbers, so nothing is typed twice, and the covers are drawn in code: swap the Cover for an img of your own artwork and keep the title and artist beside it.
What do the chips do?
Each chip is a rule; pressed means it applies. Switching one off widens the result at once and the status line says how many tracks now fit. If no track fits, an empty state asks you to switch a rule off or write different words, and the list keeps its height. Pressing Generate or an example starts again from the words and turns every chip back on.
What does Regenerate change?
It keeps the rules and shows the same matches in a different start: variant 2 and 3 of 3 begin three tracks later in the list and wrap around. With only a few matches the order changes more than the content. It never calls anything and never picks at random, so the same words give the same three variants every time.
What stays local, and how do I save for real?
Everything. Save playlist only marks this result as saved in the page, and the button says Saved until the words, the rules or the variant change; nothing is stored or sent. To make it real, send the track ids in list to your API in save, and give the playlist a name field if you want one.
How do I use it from the keyboard and a screen reader?
Tab runs the prompt, the examples, Generate, the rule chips, Regenerate and Save. Enter in the prompt does not submit (it is a multi-line field), so use Generate. The energy meter is drawn bars with the level in text for a screen reader, the mood glyph is decorative beside the mood word, and one polite status line says what changed.