shadcn.io is not affiliated with official shadcn/ui
Recommendations Picker Blog Block for React
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 React with Base 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 takes the item values directly.
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.
Related
- Pro
Related Posts Shared Topics Blog
Card gridsA More like this strip: three related posts as cells on shared hairlines, each showing which of the current post's three topics it shares, with a tick on the shared ones and a count such as 2 of 3 topics in common.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- 1425Pro
Trending Posts Blog
Post listsSix ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.
- Pro
Search Grid Blog
Card gridsA developer-tools blog behind a search field: a slash shortcut focuses it, typing keeps the posts whose title or summary holds the words and marks them, and six cells draw tiny tool windows as covers.
- Pro
Tabs Layout Blog
Post listsA film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.
- Pro
Directory Blog
Topics and indexesA map blog's A to Z index as a framed command palette: twenty-four posts grouped by the letter they start with, a filter field, arrow keys, a count and key hints at the foot.