shadcn.io is not affiliated with official shadcn/ui
Track List Features Block for Ark UI
A features section drawn as a release page for royalty splits: a cover tile with the totals, a table of six tracks with a stacked split bar and a payout status each, and a strip with the chosen track's writers and shares.
Installation
Overview
A features section for React with Ark UI, drawn as the release page of one single in a royalty-splits product. A cover tile and the release's totals sit above a table of six tracks: number, title and length, a stacked bar of who owns the track in foreground weights, streams and a payout status. Choosing a track fills the strip under the table with its writers, their roles and their shares. It's a settings-and-statements page, not a player: nothing plays. The bands share the page's rails and the block ends on the strip; on a phone each track becomes a stacked row. It's built from Table, Badge, Button and the Guides line kit, with your theme's tokens for every colour and no primary button.
FAQ
How do I change the tracks and the splits?
Edit TRACKS at the top of the file: each track has a length in seconds, a stream count, a status (PAID, PENDING or HELD), a note and its writers with a share that adds up to 100. The bar, the totals ("6 tracks, 22 min", "1.2M streams", "3 of 6 tracks") and the strips are all derived from that one list, so they can't disagree.
How do I choose a track from the keyboard?
Each track's title is a button: Tab to it and press Enter or Space. The strip under the table changes and a polite status line says who the track's writers are and what share each has. The buttons are marked pressed, and each one names the strip it controls.
Does the page jump when I choose a track?
No. Every track's strip is rendered in the same grid cell and only the chosen one is visible, so the strip is as tall as the tallest one and nothing below it moves. The hidden strips are inert and invisible to assistive technology.
Is it a real table, and what changes on React Aria?
It's a real table with a header row, and a screen reader reads each title as its row's header; Tab moves between the title buttons.
Why are the writers' slices grey and not coloured?
The bar uses foreground weights, the darkest slice for the biggest share, so it follows any theme and keeps its contrast. Colour never carries the meaning: the strip lists every writer with a swatch, a name, a role and the share as a number, and the bar itself is hidden from assistive technology because the numbers say the same.