shadcn.io is not affiliated with official shadcn/ui
Reading List Team Block for Ark UI
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 Ark 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. 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.