Track List

A list of tracks with active and playing states and arrow-key navigation.

1 min read · 149 words

1
Night Drive audiocn
0:19
Low Tide audiocn
0:24
3
Arcade audiocn
0:13
4
Unreleased Not available
3:21

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/track-list.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/track-list.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/track-list.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/track-list.json

Usage

<script lang="ts">
	import {
		TrackList,
		TrackListItem,
		TrackListItemContent,
		TrackListItemIndex,
		TrackListItemTitle,
	} from "#lib/components/ui/track-list/index.js";
</script>

<TrackList>
	{#each tracks as track, index (track.id)}
		<TrackListItem
			active={track.id === current}
			onSelect={() => play(track)}
			playing={track.id === current && playing}
		>
			<TrackListItemIndex>{index + 1}</TrackListItemIndex>
			<TrackListItemContent>
				<TrackListItemTitle>{track.title}</TrackListItemTitle>
			</TrackListItemContent>
		</TrackListItem>
	{/each}
</TrackList>

TrackListItemIndex shows its children, or a small animated equaliser while the item is playing.

Anatomy

<TrackList>
	<TrackListItem>
		<TrackListItemIndex />
		<TrackListItemArtwork />
		<TrackListItemContent>
			<TrackListItemTitle />
			<TrackListItemDescription />
		</TrackListItemContent>
		<TrackListItemDuration />
		<TrackListItemActions />
	</TrackListItem>
</TrackList>

Accessibility

Up and Down move between items; Home and End jump; Enter or Space selects.
The current item has aria-current.
Buttons inside TrackListItemActions stay reachable with Tab and do not select the item.

Reordering is a recipe with your drag-and-drop library of choice, not built in.

API reference

TrackList

Prop	Type	Default
`size` Row height.	`"sm" \| "default" \| "lg"`	`"default"`
`variant`	`"default" \| "outline"`	`"default"`

TrackListItem

Prop	Type	Default
`active` The current track.	`boolean`	`false`
`playing` The current track, playing.	`boolean`	`false`
`disabled`	`boolean`	`false`
`onSelect` Click, Enter or Space.	`() => void`	—
`child` Renders your own element. Spread props on it.	`Snippet<[{ props }]>`	`<li>`