Shadcn Sortable Playlist

Sortable playlist with frame. Built by composing Badge, Frame, Sortable. A free, open source shadcn sortable example you can install with npx shadcn@latest add @reui/c-sortable-4 and edit as your own code.

Sortable playlist with frame

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A music queue in a Frame with a track count, a Playing badge on the current song and the length of every track

When to use

Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
Tile grids such as a media library, where cards change places across rows and columns
Grouped options and menus reordered in place, such as product variants or sidebar menu entries

When not to use

Rows of files with a type badge and size, set straight on the page: use the Sortable File List example
Cards that move between several status columns on one board: use the Kanban component
Ranked table rows that keep several columns of values lined up: use the Drag & Drop blocks
A whole page layout of sidebar, top bar and content area around the list: use the App Shell blocks

Agent notes

defaultTracks marks the playing song with active and nothing changes it; drive active from your player state
Drag listeners sit on SortableItemHandle only, so a SortableItem rendered without one cannot be dragged
Passing onMove skips the built-in reorder, so neither onValueChange nor onValueCommit fires on drop
The drag preview clones the child of Sortable whose value matches the dragged item, so a wrapper around SortableItem needs that value too

Markdownhttps://reui.io/components/sortable/c-sortable-4.md

MCPget_example("c-sortable-4")

Installnpx shadcn@latest add @reui/c-sortable-4

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Sortable Playlist

About Shadcn Sortable Playlist

What You Can Build With Shadcn Sortable Playlist

Composes Badge, Frame, Sortable, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sortable-4
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Sortable Examples

File List Sortable list of items with drag-and-drop
Grid Layout Sortable list of items with grid layout
Nested Layout Sortable list of items with nested layout
Settings Priority Sortable settings priority with frame
Sidebar Navigation Sortable sidebar navigation with frame
Image Gallery Sortable image gallery grid with frame
Persisted Order Sortable list persisted to a backend

Related Shadcn Component Categories

Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.
Stepper
Open-source shadcn stepper components for multi-step forms, checkout flows, and onboarding.
Switch
Open-source shadcn switch components for settings toggles, preferences, and binary choices.
Table
Open-source shadcn table components for admin tables, data display, and responsive lists.
Tabs
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.
Textarea
Open-source shadcn textarea components for comments, long-form input, and support tickets.

Frequently Asked Questions

When should I use Shadcn Sortable Playlist?

Use it for a music queue in a Frame with a track count, a Playing badge on the current song and the length of every track.

Shadcn Sortable as a whole fits:

Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
Tile grids such as a media library, where cards change places across rows and columns
Grouped options and menus reordered in place, such as product variants or sidebar menu entries

For rows of files with a type badge and size, set straight on the page, use the Sortable File List example. For cards that move between several status columns on one board, use the Kanban component. For ranked table rows that keep several columns of values lined up, use the Drag & Drop blocks. For a whole page layout of sidebar, top bar and content area around the list, use the App Shell blocks.

How do I install Shadcn Sortable Playlist?

Run npx shadcn@latest add @reui/c-sortable-4. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Sortable Playlist free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Sortable Playlist use?

It composes Badge, Frame, Sortable. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.