shadcn.io is not affiliated with official shadcn/ui
Book Reader Reading Goal Profile Block for React
A reader profile as a yearly goal and a shelf: a goal ring, genre bars cut from the finished books, three books in progress with page sliders, and Finish, which asks for a rating, moves the book to Recently finished, advances the ring and offers Undo.
Installation
Overview
Track a year of reading against a goal, with this reader profile for React with Base UI. The hairline frame opens on the reader: initials, name, role and place. At the start a Circular Progress ring shows the books finished against the goal, "17 of 24", over genre bars worked out from the finished books so their shares add to 100. The main cell is the shelf: three books being read, each with a Slider for the page, the page and percent beside it, and a Finish button; under them, the three most recently finished with their stars. Finish asks for a Rating in the same row; saving moves the book to Recently finished, starts the next book from the reading list in its slot, moves the ring by one and re-cuts the bars. The foot, ruled by Guides, holds a polite status line and an Undo finish button. A slot with nothing queued keeps its height and says so. It's built from Circular Progress, Slider, Rating, Button, Avatar, Badge and Guides, with a CSS entrance only. For a reading tracker, a library app or any profile that counts toward a yearly goal.
FAQ
How do I use my own books and goal?
Edit the constants at the top. GOAL is the target for the year, FINISHED_AT_START lists the books already finished with a genre, a rating and a date, READING_AT_START holds the three books in progress, and UP_NEXT is the reading list that fills a slot when a book is finished. The ring, the count and the genre bars are worked out from the finished list, so adding a book there moves them. AS_OF is the date a newly finished book gets.
What happens when I press Finish?
The book's row swaps its slider for a star rating with Save and Cancel; the rest of the shelf stays put. Saving needs a rating, then the book moves to the top of Recently finished, the next book on the list starts in its slot, the ring and the genre bars update, and the status line says so. Cancel leaves the book where it was.
How does Undo work?
It takes back the last finish only: the book returns to its slot at the page it was on, the book that took its place goes back to the list, and the ring and bars move back. Nothing is stored anywhere; a reload starts again. In a real app, write the finish to your API and make Undo delete that record.
What if there is nothing left to start?
The slot stays but shows Free slot, nothing is queued, in the space the row had, so the panel does not change height. Once the list runs out you can still finish the other books.
Is it accessible?
Each slider is named with its book and reads its value as a page out of the total. Finish is named with the book, the rating is a group of stars with a spoken value such as 4 of 5, and the status line is a polite live region present from the start. The ring is decorative; the count is written next to it, and the genre bars list their counts as text.