shadcn.io is not affiliated with official shadcn/ui
Single Open Accordion Blog Block for Radix UI
Four dev notes as a single-open accordion: each row shows its number, title, date and reading time, and the open row reveals the dek, the byline with its category and a Read post link.
Installation
Overview
A post-list accordion for React with Radix UI, written for Hobwick, a code-notes publication. A start-aligned header sits over four posts as rows that run from rail to rail. Each row is the post's number, its title and, at the end, its fixed date and reading time. The newest row is open on load and shows the one-line dek, the byline (initials, author) with the post's category and a Read post link. Opening another row folds the open one, and the open row can be folded as well. It's built from Accordion, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. There are no covers; the text does the work.
FAQ
Can two rows be open at once?
No: the accordion is single-open on every target, so opening a row folds the previous one. A row can also be folded again, leaving all four closed. To allow several at once, turn on multiple opening in the Accordion's own props.
How do I change the posts?
Edit POSTS at the top of the file: each post has an id, a title, a dek, an author, a category, an ISO date, the reading minutes and a href. The number in the row comes from the post's place in the list, and the date is formatted from the ISO string in UTC, so it reads the same on the server and in every browser.
Is each row a heading?
Yes. Every trigger sits in an h3 under the block's one h2, so a screen-reader user can move between the posts by heading as well as by arrow keys.
The Accordion renders the heading around the trigger itself.