shadcn.io is not affiliated with official shadcn/ui
Book Club Team Block for Radix UI
A 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.
Installation
Overview
A book-club section for React with Radix UI, written for Kettlewell, a fictional independent bookshop. The split's end holds the header ("The Kettlewell book club"), the current read (title, author and the month), a "Chapter 7 of 12" progress bar, and a list of three facts: who is reading along (an avatar stack and first names), when the club meets next, and where. At the start, a framed plate draws the book's cover over two flat books, a drawing built from boxes and rules and never a photo; a solid divider separates it from the copy. Under the split a band runs rail to rail and ends the block: "Past reads" is a collapsible that opens the five books the club has finished, each with its author and the month. On a phone the copy comes first and the plate under it. It is built from Progress, Avatar, Collapsible and Guides with your theme's tokens. The book, the people and the meeting are made up for the example.
FAQ
How do I change the book and the past reads?
Edit CURRENT (title, author, month, the chapter the club has reached and the chapter count) and PAST (a title, an author and a month, newest first) at the top of the file. The bar, the "Chapter 7 of 12" line and the percentage are all worked out from chapter and chapters. Months are words with no year, so the list never goes stale.
Is the cover a picture?
No. It is a few boxes: a dark cover with an inner rule, a spine strip, the title and author set in text, and two flat books under it. It is hidden from assistive technology, and the same title and author are in the heading and the line under it, so nothing is lost. To use a real cover, replace the Plate with an image and give it empty alt text.
How is the progress bar announced?
The words "Chapter 7 of 12" are real text beside the percentage; the bar repeats it as a drawing and is named with the same sentence, so a screen reader hears it once from the text and the drawing adds nothing new.
The name is given with aria-label.
How does the Past reads band work?
It is a heading with a button inside it, with the open state announced and the chevron turned when open. The list opens in place under the band and is the last thing in the block, so the block never draws a line below it. A closed Collapsible leaves its list out of the page entirely; the books are added when it opens.