shadcn.io is not affiliated with official shadcn/ui
Album Notes Music Block for Solid
Digital liner notes drawn as a booklet of four spreads across a gutter: credits and a drop-cap opening, commentary on nine tracks, and a thanks page, turned with Previous and Next buttons or the arrow keys, one page at a time on a phone.
Installation
Overview
Give an album the booklet that streaming took away, with these liner notes for Solid with Ark UI. It sets Paper Moons by Cobalt Orchard, as the Linerbook app shows it, in a hairline frame with a plus mark on each corner. Two paper pages sit side by side across a gutter, a centre line with a plus mark at each end. Spread one holds the credits, with a small drawn cover, and an opening note set with a Drop Cap Text initial. Spreads two to four hold the commentary on nine tracks in italics, with each track's length, and the last page carries the thanks and a dedication. Previous spread and Next spread buttons turn it, and so do the arrow keys while focus is inside the block. On a phone the spread splits into eight single pages, with Previous page and Next page and a "Page 3 of 8" count. All the pages sit in one grid cell, so the booklet never changes height. It's built from Drop Cap Text, Button and Guides, with a CSS entrance only. For album pages, music stores and artist sites.
FAQ
How do I write my own booklet?
Edit CREDITS for the credits page, OPENING for the note with the drop cap, SONGS for the nine tracks (a number, a title, a length in seconds and the commentary) and THANKS and DEDICATION for the last page. LEAVES says what each of the eight pages holds, so a different layout is a change to that list. The band, the album, the studio and the people here are invented, and the text is original.
How do I turn the page?
Press Previous spread and Next spread, or use the arrow keys while focus is anywhere in the block. In a right-to-left page the arrow keys swap, so the key that points forward always goes forward. The buttons become aria-disabled at the first and last spread rather than disappearing, so the foot never changes. A polite status line reads out the spread and its page numbers.
What happens on a phone?
Only one page shows at a time. The same state drives both layouts, so the page you are on stays when the window resizes, and the buttons change to Previous page and Next page with a count such as "Page 3 of 8". The arrow keys turn one page on a phone and one spread on a wide screen.
Why does the booklet keep one height?
Every page is drawn in the same grid cell and only the current ones are visible, so the cell is as tall as the fullest page. Hidden pages are removed from the tab order and from screen readers. Turning the page never moves anything below it.
How is the paper look made, and does it follow the theme?
The pages are a faint mix of the foreground and the card colour, with the commentary in italics and the hairline gutter in the border colour, so they follow light and dark themes with no fixed paper colour. The drop cap is the paragraph's own first letter, so the text stays whole for copying and for screen readers.