shadcn.io is not affiliated with official shadcn/ui
Compact List Blog Block for React Aria
Twenty 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.
Installation
Overview
A contents-page index for React with React Aria, written for Plinthwork, an architecture blog. Twenty posts are dense rows 40 pixels tall: the date at the start, the title (the row's one link), a dotted leader like a printed contents page and the reading time ("6 min") at the end. Eight rows show, and a "Show 12 more" button opens the other twelve in place. The extra rows stay in the page, folded and inert, so they take no tab stops until opened. A phone folds each date under its title. The block ends on the button's band. It's built from Guides and Button. For archives, documentation indexes and blogs with long back catalogues.
FAQ
Why are the rows so small, and how does the title stay a link?
Each row is one line of 14 pixel text at a fixed 40 pixel height, with a date column of 6.5rem, so twenty posts fit in about a screen. The title is a heading with a link whose after: box covers the whole row and carries the focus ring, so the dotted leader and the minutes are part of the click target too.
How does Show more open without moving things?
The twelve extra rows live in a wrapper that animates grid-template-rows from 0fr to 1fr. Closed, the wrapper is inert and invisible, so the rows are neither focusable nor read; open, they follow the first eight. The button says Show 12 more or Show fewer (both labels share one cell, so it keeps its width), carries aria-expanded and points at the wrapper with aria-controls. With reduced motion the rows open at once.
What is the dotted leader, and does it show on a phone?
An empty, aria-hidden span with a dotted bottom border that stretches between the title and the minutes. On a phone the date goes under the title and the leader is dropped, because there is no free space to lead across.
How do I change the posts?
Edit POSTS: a title, an ISO date, a reading time in minutes and an href. SHOWN sets how many rows start visible. Dates are fixed and formatted in UTC.