shadcn.io is not affiliated with official shadcn/ui
Reading List Blog Block for React Aria
Five saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
Installation
Overview
A reading list for React with React Aria, written for Pagefold, a read-later club. Five saved articles are rows, each ending in a bookmark toggle (pressed means saved). Un-saving strikes the row's title through in place and swaps its byline for "Removed from your list" and an Undo button styled as a link, with no toast and no row leaving, so nothing moves; pressing the bookmark again or Undo saves it back. The foot, a polite status line, reads the totals derived from what is still saved: "5 saved, 46 min to read". The list lives on the page only and is lost on reload. It's built from Guides and Toggle. For read-later features, course lists and blogs with an account.
FAQ
Where is the saved state kept?
In one useState array of article ids, starting with every article saved. The totals are computed from it on every render. To keep a list, store the ids in localStorage or your API and pass them in as the starting value.
Why a strike-through and an Undo instead of a toast?
A toast appears somewhere else and disappears on a timer, which is hard to reach from the keyboard and easy to miss. Here the row itself shows what happened and keeps the way back next to the title, with no timer. The byline line has a fixed height, so the row never changes size.
How does a screen reader hear it?
Each bookmark is a toggle named "Saved: <title>" that reports pressed or not pressed. The foot is a role="status" line, so a change reads as "4 saved, 34 min to read". Undo carries a hidden "removing <title>" so it is unique in a list of five.
How do I change the articles?
Edit ARTICLES at the top of the file: an id, a title, an author, a reading time in minutes and an href. The header's "Saved 5 of 5" and the foot's totals are derived from the list.