Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Nested Accordion Archive Blog Block for Radix UI

A 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A post archive for React with Radix UI, written for the Furrow Almanac, a farm journal. A start-aligned header sits over a count band ("18 posts in 3 years", with an Expand all control) and a nested accordion that runs from rail to rail: each year opens to its months, and each month opens to its posts. The newest year and its newest month are open on load. A post is one row: the day, the title as its one link, the author and the reading time. Every count, the posts in a year, the posts in a month and the total, is worked out from the typed posts, so the rows and the numbers cannot disagree. It's built from Accordion, Button and Guides, with CSS for the entrance and the chevrons. For a blog that has years of posts and wants readers to jump to a month without paging.

FAQ

How do I change the posts?

Edit POSTS at the top of the file, newest first, as { author, date, href, minutes, title } with date as an ISO string. The years, the months, their order and every count are derived from the dates, so adding a post in a new month adds that month, and in a new year adds the year.

What does Expand all do?

It opens every year and every month at once. Its label never changes, so it doesn't shift under your pointer; its icon turns into the fold icon and aria-expanded becomes true while everything is open, and pressing it again folds everything back. Opening or closing a single row by hand still works at any time.

How does it work with a keyboard?

Every year and month is a button inside a heading, so Tab moves through the open rows and Enter or Space opens and closes one. Each post title is a link. The Up and Down arrow keys also move between the triggers of one level, and Home and End jump to the first and last.

Are folded posts in the page for search and screen readers?

No. Radix removes a closed panel's content from the HTML; open a row to read it.

Why are there no covers?

An archive is for scanning. The row is the date, the title and the byline; a cover would double the height of every row. For a version with covers, see the cards and pagination blogs.

Does it work right to left?

Yes. The rows and the chevrons mirror, and the counts, the days and the reading times are isolated with bdi, so "18 posts in 3 years" keeps its order.

All 100 blog blocks