shadcn.io is not affiliated with official shadcn/ui
Book Shelf Carousel Block for React
Twelve book spines on a scrolling shelf, each as wide as its page count with a vertical title, where pressing a spine pulls it forward and fills a detail band with the author, pages and a line.
Installation
Overview
Show a shelf of items that differ in size, with this book shelf carousel for React with Base UI. The Spinewell reading club lists twelve books as spines, each as wide as its page count, from a thin 124-page volume to a thick 608-page one. A spine has a title set in a vertical writing mode between two drawn bands, and the shelf scrolls and snaps at the start of each spine. Pressing a spine, or pressing Enter on it, selects it and pulls it forward 8 px (none under reduced motion), and a detail band under the shelf shows its title, author, page count and one line. Selecting and scrolling are separate: the arrow keys scroll the shelf, and tabbing to a spine scrolls it into view. The foot holds "Spine 3 of 12" and Previous and Next Buttons. The bands are ruled by Guides. The club, the books and the authors are made up for the example.
FAQ
How do I add my own books?
Edit BOOKS. Each has an id, a title, an author, a page count pages, a one-sentence line and a band (single, double or dots). The spine's width comes from the page count by one helper, and the detail band reads from the selected book.
How do selecting and scrolling differ?
A press or Enter selects a book and fills the detail band; the arrow keys and the buttons only scroll the shelf. Tabbing to a spine scrolls it into view without selecting it. Each slide keeps its natural width, and Embla snaps at the start of each one.
What moves, and what does not?
Only the selected spine moves, by 8 px, with a CSS transition that is off under reduced motion. The detail band keeps its height for every book.
How does it work with a keyboard?
Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears.