# Shadcn Playlist

> Sortable playlist with frame

- Type: example, free and open source (MIT)
- Component: [Sortable](https://reui.io/components/sortable.md)
- Page: https://reui.io/components/sortable/c-sortable-4
- Docs (Base UI): https://reui.io/docs/components/base/sortable.md
- Docs (Radix UI): https://reui.io/docs/components/radix/sortable.md
- MCP: `get_example("c-sortable-4")`
- Registry item: https://reui.io/r/styles/base-nova/c-sortable-4.json
- Uses: Badge, Frame, Sortable

## 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

## Agent notes

- `defaultTracks` marks the playing song with `active` and nothing changes it; drive `active` from your player state

## When not to use

- Rows of files with a type badge and size, set straight on the page: use [File List](https://reui.io/components/sortable/c-sortable-1.md) (`get_example("c-sortable-1")`)

## Install

```bash
npx shadcn@latest add @reui/c-sortable-4
```

## About Shadcn Sortable

### 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

- Cards that move between several status columns on one board: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)
- Ranked table rows that keep several columns of values lined up: use the [Drag & Drop blocks](https://reui.io/blocks/data-grid/drag-drop.md)
- A whole page layout of sidebar, top bar and content area around the list: use the [App Shell blocks](https://reui.io/blocks/application/app-shell.md)

### Agent notes

- 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

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.