shadcn.io is not affiliated with official shadcn/ui
Album Timeline Music Block for Solid
A discography line of six albums as buttons sized by runtime on a critic-score line, a Score or Runtime axis switch, a genre band that uses shapes instead of colour, and a card for the chosen album with Previous and Next.
Installation
Overview
Show how a band changed over a decade, with this discography line for Solid with Ark UI. It draws six albums by The Ninth Ledger, from 2016 to 2025, in an Eraline panel with a plus mark on each corner. Each album is a real button on a hand-built line of critic scores, sized by its runtime and joined to the next by a path. The header's one control, a Toggle Group, swaps the y axis between the score and the runtime in minutes. Under the line a genre band lists each album's genres as shapes, a circle for rock, a square for folk, a diamond for jazz and a triangle for electronic, so the evolution reads without colour. A side cell holds the chosen album: a drawn cover, its title and year, the score, tracks and runtime, one sentence about it, and the change against the previous album worked out from the scores, for example "Score 88: 4 points above the previous album". Previous and Next buttons step through the six. On a phone the line stays whole and the card stacks under the band. It's built from Toggle Group, Button and Guides, with a CSS entrance only. For artist pages, label sites and music history timelines.
FAQ
How do I use my own discography?
Edit ALBUMS: each has an id, a title, a year, a critic score, tracks and minutes, a list of genre ids from GENRES, one sentence and a drawn art entry. The line, the dot sizes, the axis labels, the genre columns and the score change are all drawn from that list. The six columns are equal, so for a different number of albums change the grid and the position helper together. The scores here are example data.
What does the axis switch do?
Score plots the critic score from 60 to 100 and Runtime plots the length in minutes from 30 to 60. The dots and the joining line move to the new height at once and the axis labels change; the chosen album and the panel's height do not. The dot sizes always show the runtime, so under Runtime the vertical position and the size agree.
Why shapes in the genre band?
Genres are told apart by a circle, a square, a diamond or a triangle, with their names beside them from the medium breakpoint up and in a legend at every width, so nothing depends on colour. The chosen album's column is lightly tinted. A hidden table lists every album with its year, score, runtime and genres for a screen reader.
How do I use it from the keyboard?
Tab runs through the six dots in order, and Enter or Space picks one; the chosen dot is solid, ringed and marked as current. Previous and Next step through the albums and say when you reach the first or the latest, and the status line reads out the album, its year and the change in score.