# Track Row

List row for songs, episodes and chapters with artwork or a number, badges, progress and duration. The playing row shows live equaliser bars, and finished episodes are marked Played.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/track-row
```

## Import

```tsx
import { TrackEqualizer, TrackRow, TrackRowSeparator } from "@/components/ui/track-row/track-row";
```

## Variants

- `album` — Album tracklist: `npx @lumioui/cli add pro/track-row-album`
- `audiobook` — Audiobook chapters: `npx @lumioui/cli add pro/track-row-audiobook`
- `playlist` — Playlist with artwork: `npx @lumioui/cli add pro/track-row-playlist`
- `podcast` — Podcast episodes: `npx @lumioui/cli add pro/track-row-podcast`

## Props

### TrackEqualizer

| Prop | Type | Notes |
| --- | --- | --- |
| `playing` | `boolean` | Bars move only while true; they settle into a still chord when false. |
| `tone?` | `"accent" | "onArt"` | accent bars on the canvas, or white bars over artwork. |
| `ignite?` | `boolean` | Bars grow up from the baseline on mount, 60ms apart. Default false. |
| `level?` | `SharedValue<number>` | Receives the middle bar's height (0–1) every frame — for light that follows the music. |
| `className?` | `string` | — |

### TrackRow

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | — |
| `subtitle?` | `string` | Artist, show or book line. |
| `meta?` | `string` | Leading caption on the subtitle line — release date, "Chapter 4". |
| `index?` | `number | string` | Track number shown in the leading slot (album / chapter lists). |
| `artwork?` | `ImageSourcePropType` | Artwork shown in the leading slot instead of a number. |
| `state?` | `TrackRowState` | Now-playing state: equaliser replaces the number / covers the artwork. |
| `explicit?` | `boolean` | — |
| `downloaded?` | `boolean` | — |
| `duration?` | `number | string` | Seconds, or a preformatted string ("18 min left"). |
| `progress?` | `number` | 0–1 listened progress — draws a short bar under the subtitle. |
| `played?` | `boolean` | Fully listened: title dims, a check replaces the number, "Played" shows. |
| `titleLines?` | `number` | Title line clamp. Default 1 (episode feeds use 2). |
| `onPress?` | `() => void` | — |
| `onMorePress?` | `() => void` | — |
| `trailing?` | `React.ReactNode` | Replaces the duration + more button. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check
- `more-horizontal` — /icons.html?i=more-horizontal

Source: https://lumioui.com/components/track-row