Blog 115 - Blog Year Archive With Monthly Chart

Pro

Single-year blog archive with a twelve-month bar chart of post counts that links to each month, followed by posts grouped by month in two columns.

Shadcn Blog 115 block

Component data

ID
blog115
Access
pro
Created
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blog 115 block design & features

Blog115 is a one-year archive built with shadcn/ui styling that opens with a small chart. The header pairs a heading and description with a very large year and its total post count. Beneath it, twelve vertical bars show how many posts went out each month, with the count above each bar and short month labels along a strong baseline. Bars for months with posts link down to that month's list, and the lists follow in a two-column grid with a month name, count, and dated post titles.

The chart gives the block its character while staying monochrome. Bars sit in a soft gray and fill with the foreground color on hover or focus, empty months show a thin stub, and counts and labels use a mono face. Below the chart the layout returns to plain type and hairlines, with titles underlining on hover.

It reads like a personal publishing log, a less common archive pattern that shows a blog's rhythm at a glance. Complexity is moderate and content-driven: it needs a year's posts grouped into twelve months, and the block works out bar heights and totals itself.

On phones the chart keeps all twelve bars at a narrower width and the month lists stack into one column.