audiocnSolid

Track List

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

  • 1
    Night Driveaudiocn
    0:19
  • Low Tideaudiocn
    0:24
  • 3
    Arcadeaudiocn
    0:13
  • 4
    UnreleasedNot available
    3:21

Installation

$ pnpm dlx shadcn@latest add @audiocn-solid/track-list

Usage

<TrackList>
  <For each={tracks()}>
    {(track, index) => (
      <TrackListItem
        active={track.id === current()}
        onSelect={() => play(track)}
        playing={track.id === current() && playing()}
      >
        <TrackListItemIndex>{index() + 1}</TrackListItemIndex>
        <TrackListItemContent>
          <TrackListItemTitle>{track.title}</TrackListItemTitle>
        </TrackListItemContent>
      </TrackListItem>
    )}
  </For>
</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

TrackListItem

Prop

Type