audiocnTrack List
A list of tracks with active and playing states and arrow-key navigation.
- 1Night Driveaudiocn0:19
- Low Tideaudiocn0:24
- 3Arcadeaudiocn0:13
- 4UnreleasedNot available3:21
Installation
$ pnpm dlx shadcn@latest add @audiocn/track-listUsage
<TrackList>
{tracks.map((track, index) => (
<TrackListItem
active={track.id === current}
key={track.id}
onSelect={() => play(track)}
playing={track.id === current && playing}
>
<TrackListItemIndex>{index + 1}</TrackListItemIndex>
<TrackListItemContent>
<TrackListItemTitle>{track.title}</TrackListItemTitle>
</TrackListItemContent>
</TrackListItem>
))}
</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
TrackListItemActionsstay 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