Overview

Components

Libs

Resources

Audio Queue

Queue management components with browse, search, reorder, and control playback order.

A set of composable components for managing the audio queue. Includes a browseable queue dialog, shuffle, repeat mode, and an advanced preferences panel.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-audio-ui.vercel.app/r/queue.json

npx shadcn-svelte@latest add https://svelte-audio-ui.vercel.app/r/queue.json

npx shadcn-svelte@latest add https://svelte-audio-ui.vercel.app/r/queue.json

bun x shadcn-svelte@latest add https://svelte-audio-ui.vercel.app/r/queue.json

Install @lucide/svelte :

pnpm i @lucide/svelte

npm i @lucide/svelte

yarn install @lucide/svelte

bun install @lucide/svelte

Copy and paste the following code into your project.

<script lang="ts">
  import { SlidersHorizontal } from "@lucide/svelte";
  import { audioStore, type InsertMode, type RepeatMode } from "$lib/audio-store.svelte.js";
  import { cn } from "$lib/utils.js";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import * as Tooltip from "$lib/components/ui/tooltip";
  import { Button } from "$lib/components/ui/button";

  interface Props {
    class?: string;
    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg";
    variant?: "outline" | "default" | "destructive" | "secondary" | "ghost" | "link";
    tooltipLabel?: string;
    [key: string]: unknown;
  }

  let {
    class: className = "",
    size = "icon" as Props["size"],
    variant = "outline" as Props["variant"],
    tooltipLabel = "Queue preferences",
    ...rest
  }: Props = $props();
</script>

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    {#snippet child({ props: dropdownProps })}
      <Tooltip.Root>
        <Tooltip.Trigger>
          {#snippet child({ props: tooltipProps })}
            <Button
              {...dropdownProps}
              {...tooltipProps}
              class={cn(className)}
              data-slot="audio-queue-preferences-trigger"
              {size}
              {variant}
              {...rest}
            >
              <SlidersHorizontal class="size-4" />
            </Button>
          {/snippet}
        </Tooltip.Trigger>
        <Tooltip.Content sideOffset={4}>{tooltipLabel}</Tooltip.Content>
      </Tooltip.Root>
    {/snippet}
  </DropdownMenu.Trigger>

  <DropdownMenu.Content
    align="end"
    class={cn("w-44", className)}
    data-slot="audio-queue-preferences-content"
  >
    <!-- Repeat mode -->
    <DropdownMenu.Label class="text-muted-foreground">Repeat Mode</DropdownMenu.Label>
    <DropdownMenu.RadioGroup
      value={audioStore.repeatMode}
      onValueChange={(v) => audioStore.setRepeatMode(v as RepeatMode)}
    >
      <DropdownMenu.RadioItem value="none">None</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="one">One</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="all">All</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>

    <DropdownMenu.Separator />

    <!-- Insert mode -->
    <DropdownMenu.Label class="text-muted-foreground">Insert Mode</DropdownMenu.Label>
    <DropdownMenu.RadioGroup
      value={audioStore.insertMode}
      onValueChange={(v) => audioStore.setInsertMode(v as InsertMode)}
    >
      <DropdownMenu.RadioItem value="first">First</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="last">Last</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="after">After Current</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Usage

Import the components:

<script lang="ts">
  import * as AudioQueue from "$lib/components/ui/audio/queue/index.js";
</script>

Basic Queue

The AudioQueue component opens a dialog showing the current queue with search functionality and track selection.

<AudioPlayer.Root>
  <AudioPlayer.ControlBar>
    <AudioQueue.Root />
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

Queue with Shuffle and Repeat

Use this when you want quick access to shuffle and repeat controls. The toggle buttons provide fast switching between modes.

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player/index.js";
  import * as AudioQueue from "$lib/components/ui/audio/queue/index.js";
</script>
 
<AudioPlayer.Root class="w-max">
  <AudioPlayer.ControlBar>
    <AudioQueue.Shuffle />
    <AudioQueue.RepeatMode />
    <AudioQueue.Root />
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

Queue with Preferences

Use this when you want a compact interface with all queue settings in a dropdown menu. Ideal for space-constrained layouts.

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player/index.js";
  import * as AudioQueue from "$lib/components/ui/audio/queue/index.js";
</script>
 
<AudioPlayer.Root class="w-max">
  <AudioPlayer.ControlBar>
    <AudioQueue.Preferences />
    <AudioQueue.Root />
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

Queue with All Controls

Use this when you want a compact interface with all queue settings in a dropdown menu. Ideal for space-constrained layouts.

<script lang="ts">
  import * as AudioPlayer from "$lib/components/ui/audio/player/index.js";
  import * as AudioQueue from "$lib/components/ui/audio/queue/index.js";
</script>
 
<AudioPlayer.Root class="w-max">
  <AudioPlayer.ControlBar>
    <AudioQueue.Shuffle />
    <AudioQueue.RepeatMode />
    <AudioQueue.Preferences />
    <AudioQueue.Root />
  </AudioPlayer.ControlBar>
</AudioPlayer.Root>

API Reference

AudioQueue

An icon button that opens a dialog showing the current queue. Supports live search by title or artist, drag-to-reorder tracks (disabled when filtering), per-track remove, and a clear-all button.

Props

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes on the trigger button.
`searchPlaceholder`	`string`	`"Search for a track..."`	Placeholder text in the search input.
`emptyLabel`	`string`	`"No tracks found"`	Heading shown when the queue is empty.
`emptyDescription`	`string`	`"Try searching for a different track"`	Subtext for the empty state.
`onTrackSelect`	`(index: number) => void`	-	Called when a track row is clicked.

Behavior

Opens a modal dialog with a full-height track list
Search filters by title and artist (case-insensitive)
When not filtering, the list is drag-to-reorder enabled
Clicking a track plays it immediately; clicking the current track toggles play/pause
Remove button appears on non-current tracks
Clear button removes all tracks from the queue and closes the dialog

AudioQueueShuffle

A toggle button that enables or disables shuffle mode. Highlights when active.

Props

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes.
`size`	`string`	`"icon"`	Button size variant.
`variant`	`string`	`"outline"`	Button visual variant.

Accepts any additional HTML button attributes via ...rest.

Behavior

When shuffle is enabled: audioStore.shuffle() randomizes the remaining tracks
When shuffle is disabled: audioStore.unshuffle() restores original order
Uses role="switch" and aria-checked for accessibility

AudioQueueRepeatMode

A toggle button that cycles through three repeat modes: none → all → one.

Props

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes.
`size`	`string`	`"icon"`	Button size variant.
`variant`	`string`	`"outline"`	Button visual variant.

Accepts any additional HTML button attributes via ...rest.

Behavior

State	Icon	Tooltip
`none`	`Repeat` (dimmed)	"Disable repeat"
`all`	`Repeat` (highlighted)	"Repeat playlist"
`one`	`Repeat1` (highlighted)	"Repeat this track"

Cycles on click via audioStore.changeRepeatMode(). Uses role="switch" for accessibility.

AudioQueuePreferences

An icon button that opens a dropdown with advanced queue settings: Repeat Mode and Insert Mode.

Props

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes.
`size`	`string`	`"icon"`	Button size variant.
`variant`	`string`	`"outline"`	Button visual variant.
`tooltipLabel`	`string`	`"Queue preferences"`	Tooltip text for the trigger.

Repeat Mode options

Value	Description
`none`	No repeat — stops after the last track
`one`	Repeat the current track indefinitely
`all`	Loop through the full queue continuously

Insert Mode options

Controls where newly added tracks are inserted into the queue:

Value	Description
`first`	Insert at the beginning of the queue
`last`	Append to the end of the queue
`after`	Insert immediately after the current track

Audio Player — player controls to use alongside queue components
Audio Provider — required wrapper that manages queue state

Audio Provider Audio Track

Audio Queue

Installation

Install @lucide/svelte :

Copy and paste the following code into your project.

Usage

Basic Queue

Queue with Shuffle and Repeat

Queue with Preferences

Queue with All Controls

API Reference

AudioQueue

Props

Behavior

AudioQueueShuffle

Props

Behavior

AudioQueueRepeatMode

Props

Behavior

AudioQueuePreferences

Props

Repeat Mode options

Insert Mode options

Related