shadcn.io is not affiliated with official shadcn/ui
Playlist Compare Music Block for Vue
A two-playlist comparison with a drawn overlap sized by track count, columns for Only in A, In both and Only in B, a shared-genre line, a filter, and a Merge that drops duplicates and opens a preview.
Installation
Overview
Show two lists side by side and what they share, with this playlist comparison for Vue with Ark UI. It shows Twinlist, a playlist comparison tool, as a header over a hairline frame with a plus mark on each corner. Two Native Selects pick playlist A and B from four typed playlists; choosing the one already on the other side swaps them and says so. Between them a drawn overlap sizes two circles by track count and pulls them together by the share they have in common, with the count in words ("7 in both") and a line such as "4 of 7 genres in common". A Toggle Group filters the view to All, In both, Only A or Only B. Three columns on the panel's lines list the tracks: Only in A, In both (each marked with a link glyph and the words) and Only in B. Merge, the only Shine Button, works out the list with every shared track once, says "17 tracks, 7 duplicates dropped" and opens a Collapsible preview. It's built from Native Select, Toggle Group, Collapsible, Shine Button and Guides, with a CSS entrance only. For music apps and any tool that compares two lists.
FAQ
How do I use my own playlists?
Edit PLAYLISTS: each has an id, a name and the track ids, and LINES holds the track data (title, artist, genre, tempo, energy, mood, length and a cover pattern). Shared and unique tracks, the genre line, the circle sizes and the merge count are all worked out from the two lists. In your app load the two lists from your API when a select changes.
What if I pick the same playlist twice?
It is never allowed to stand: choosing the playlist that is already on the other side swaps the two, and the status line says "Rainy focus was already B, so A and B swapped." A side that has nothing unique shows a line saying every track is in the other list too.
What does the filter do?
It hides the columns you do not want, but they keep their space, so the other columns never move or resize. The hidden ones are removed from the tab order and from screen readers. All shows the three columns.
What does Merge save?
Nothing. It builds the list in the page (every track of A in order, then the ones only B has), states the count and the duplicates dropped in the status line, and opens a preview of it. Changing either select clears the preview. To make it real, send the merged track ids to your API in doMerge and create the playlist there.
How is the overlap drawn?
Two circles in an SVG: the radius of each follows the square root of its track count, and the distance between the centres shrinks as the shared share of the smaller list grows, down to concentric when one list is inside the other. It is an illustration; the number beside it and the columns are the exact answer, and the SVG has a title with the same numbers for a screen reader.
How do I use it from the keyboard?
Tab runs the two selects, the filter, each visible column's list (a scroll region you can move in with the arrow keys), Merge and, once merged, the preview button. The filter is a single choice group; the arrow keys move between its options. One polite status line says what changed.