shadcn.io is not affiliated with official shadcn/ui
Reading List Blog Block for React
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 Base UI, 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.
Related
- Pro
Pinned Posts Blog
Reading toolsThree pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.
- Pro
Reading Progress Blog
Reading toolsFour articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
- Pro
Compact List Blog
Post listsTwenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.
- Pro
Nested Accordion Archive Blog
Archives by dateA farm journal's archive as a nested accordion, years that open to months and months that open to posts, with counts worked out from the posts and an Expand all control.
- Pro
Tabbed Inbox Notification Blog
Subscribe and alertsA post-alert inbox: All and Unread tabs with counts, rows with an unread dot that clears when opened, a Mark all read button and an unread count in the header, all derived from the rows.
- Pro
Recommendations Picker Blog
Reading toolsA Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.