← DOCS
layout

Tracklist

Music tracklist layout with hover effects.

npx chaos add tracklist

PREVIEW

01Track Name3:42

USAGE

import { Tracklist } from '@/components/chaos/layout/tracklist';

const tracks = [
  { number: 1, name: 'Intro', duration: '0:42' },
  { number: 2, name: 'Main Theme', artist: 'Composer', duration: '3:14', active: true },
  { number: 3, name: 'Finale', duration: '5:00' },
];

<Tracklist tracks={tracks} showHeader />

PROPS

PropTypeDefault
tracksTrack list {number, name, artist?, duration, active?}
Track[]-
variantColor variant
"silver" | "blood" | "gold" | "bone""silver"
showHeaderShow header row
booleanfalse
compactCompact mode
booleanfalse
numberedLarge track numbers
booleanfalse
onTrackClickTrack click handler
(track: Track, index: number) => void-