shadcn.io is not affiliated with official shadcn/ui
Recommendations Picker Blog Block for Solid
A Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.
Installation
Overview
A recommendations picker for Solid with Ark UI, written for Orbitshelf, a sci-fi book blog. A start-aligned header sits over a split behind a divider. At the start a Select picks one of three reviews you read, a note says the matches are example data, and a drawn shelf shows the three books with the picked one standing taller. At the end four recommended reviews run from the closest match down, each with a drawn book spine (a vertical bar with the title running down it), the review's title as its one link, a dek, the byline and a thin bar with "94% match". Every pick's four reviews are stacked in one grid cell, so choosing another never moves the page, and a polite line says what is showing. On a phone the picker comes first, the shelf is hidden and the deks are dropped. It's built from Select, Progress and Guides. For a book, film or music blog and any "because you liked" shelf. The reviews and the matches are example data: nothing reads your history.
FAQ
How do I change the reviews and the matches?
Edit READS: each review you can pick has an id, a title, a spine and four recs. A recommendation has a title, a dek, an author, an ISO date, a reading time, a match percentage and its own spine. Order the four by match. The matches are example numbers; in a real site, compute them from your readers' history or your tags and pass the result in.
How are the book spines drawn?
Each is a narrow bar sized by a literal class (h-24 w-8), toned with one of three theme-token styles (solid, card or muted), with a short rule, the title running down it with writing-mode: vertical-rl, and a small mark at the foot. They're hidden from assistive technology, because the review's title carries the content, and they never mirror in a right-to-left page.
How does the Select work?
It is the catalog's Select with three items. Choosing one swaps the four reviews and updates the status line; there's no empty value. It uses a list collection built from the items.
Why does the page not move when I change the pick?
The four reviews of every pick sit in the same grid cell; only the picked set is visible, and the others are invisible, inert and hidden from assistive technology. The cell takes the height of the tallest set.