shadcn.io is not affiliated with official shadcn/ui
Reading List Task Tracker Block for React Aria
A reading tracker with the current book's page field, slider and bar, a pages-a-day pace against a finish date, a queue where Start reading swaps the current book, and a Finished shelf with ratings.
Installation
Overview
Keep a reading life on one page, with this reading list block for React with React Aria. The first cell is the book in your hands: a labelled page Input and a slider that move together, a Progress bar, and a pace worked out from a fixed day and the finish date ("15 pages a day to finish by Fri 23 Oct"). The second cell holds the queue and the Finished shelf. Start reading on a queued book swaps it with the current one, which goes to the head of the queue. The Shine Button "Mark finished" asks for the last page and a rating from 1 to 5, says which is missing, and moves the book to Finished with its rating and date. An Empty state holds the first cell when nothing is in progress. Guides rule the cells. For reading apps, book clubs and any goal with a page count and a date.
FAQ
How is the pace worked out?
It divides the pages to go by the days between a fixed AS_OF date and the finish date, rounded up. On the last page it says so, and past the date it says the goal date has passed. Point AS_OF at the current date in your app.
Why does Mark finished refuse sometimes?
A book needs its last page and a rating first. The button stays focusable with aria-disabled; pressing it shows which one is missing ("Go to the last page first: 128 pages to go.") in a reserved line so nothing jumps.
What happens when I start another book?
The chosen book becomes the current one with its saved page, and the book you were reading goes to the top of the queue with its page kept. Focus moves to the "Reading now" heading and the status line names both books.