MyloUI
Back to blocks
media
Block

Playlist Queue

Music playlist manager with drag-and-drop track reordering and player controls

Installation

npx shadcn add @mylo-ui/playlist-queue

Preview

Playlist

7 tracks
30:40 total

Midnight City

M83

4:03

Instant Crush

Daft Punk ft. Julian Casablancas

5:37

Nightcall

Kavinsky

4:18

Get Lucky

Daft Punk ft. Pharrell Williams

6:09

Starboy

The Weeknd ft. Daft Punk

3:50

Blinding Lights

The Weeknd

3:20

Levitating

Dua Lipa

3:23
0:454:03

Midnight City

M83

How to use:

  • Drag tracks to reorder the playlist
  • Click any track to play
  • Hover over tracks for more options
  • Use the heart icon to like tracks

Usage

import { PlaylistQueue } from "@/components/blocks/playlist-queue"

export default function Page() {
  return <PlaylistQueue />
}

Dependencies

lucide-react
@dnd-kit/core
@dnd-kit/sortable
@dnd-kit/utilities

shadcn/ui Components

card
button
badge
slider