shadcn.io is not affiliated with official shadcn/ui
Reading List Team Block for React
Shelf tabs over a framed shelf of book spines of different heights and thickness; choosing a spine shows the title, the author and the teammate's note, in a live region under the shelf.
Installation
Overview
A team reading list for React with Base UI, written for Hawksley, a fictional reading-tracker app. A header says how many books are on how many shelves; under it a band with a hairline and + marks holds three shelf tabs (Making, Places, Essays), each with its book count. A shelf is a framed row of six spines standing on a ruled board: they differ in height, thickness and banding, and their short titles run down them. Choosing a spine presses it and shows, under the shelf, the book's title, its author, the teammate who recommended it (an initials avatar and a name) and a one-line note. Each shelf remembers its own choice. The note area keeps one height, so choosing never moves the page. On a phone the spines scroll sideways. It is built from Tabs, Avatar, Badge and Guides with your theme's tokens. The books, the notes and the people are made up for the example.
FAQ
How do I change the books and the shelves?
Edit CATEGORIES and BOOKS at the top of the file. A book is a title, an author, a category, a recommender and a note, plus how it looks: a short spine title, a height in rem (tall), a thickness from 1 to 3 (width) and a banding style from 0 to 2. The tab counts come from the list. INITIAL says which book each shelf starts on.
Are the spines buttons, and how do they read aloud?
Yes: each spine is a real button in a list, with its pressed state announced. The spine's text is a drawing (it runs sideways); the button is named with the full title and the author, so a screen reader hears "A Map of Kitchens, by Farah Nouri". The note under the shelf is a polite live region, so the new book and its recommender are announced when you choose one.
How do the shelf tabs work?
They are tabs: the arrow keys move between shelves, Home and End jump to the first and last, and the shelf's spines are its panel. Base UI selects a tab as it takes focus. Only the chosen shelf's spines and note are in the page; the others are added when their tab is chosen.
Why doesn't the page move when I choose a book?
The note sits in a box with a fixed minimum height that fits the longest note at every width, and every shelf's spines stand in the same height. A shorter note leaves a little space under it rather than pulling the page up.
Related
- Pro
Book Club Team
Interests and clubsA split showing a bookshop's current club read, with a chapter progress bar, the members reading along and the next meeting, beside a drawn cover plate, over a band that opens the past reads.
- Pro
Reading Picks Team
Interests and clubsOne teammate's three recommendations, a book, an article and a talk, as hairline rows with a kind badge, a link, a one-line reason and a Save toggle that counts how many colleagues saved it.
- Pro
Recommended bookshelf About
Press and recognitionA bookshelf for a reading app: greyscale spines you can point at, focus or press, each pulling forward to show why the company recommends it and who did.
- 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.
- Pro
Research Papers Team
Interests and clubsA research lab's five papers as rows rail to rail: venue and year, title, authors, a citation bar scaled to the most cited paper, a Copy citation button and an abstract in an accordion.
- Pro
Meetups Team
Interests and clubsFour community organisers as rows with a twelve-month cadence strip, filled where a meetup ran, plus the next topic, when the group meets, its members and a Remind me toggle.