shadcn.io is not affiliated with official shadcn/ui
Two Column Split Changelog Block for React
A month of releases of a reporting tool in two columns: Added at the start and Fixed at the end of a divider that reaches the top rule, each head with its icon, its word and a count.
Installation
Overview
A two-column changelog for React with Base UI, written for Splitpoint, a fictional reporting tool, and its March releases. A centred header says March summary. Under it, a split whose divider reaches the top rule and runs down to the block's foot holds two lists: Added at the start and Fixed at the end. Each column's head has an icon, the word and a count taken from the list under it, and each item is one sentence with the version in mono and the day it shipped. Together the two lists are the month's eight releases, in order. On a phone the columns stack with a rule between them. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For monthly summaries and release posts that sort what changed into what is new and what is mended. The releases are example data.
FAQ
How do I change the changes?
Edit ADDED and FIXED at the top of the file, each newest first. A change has a version, a date as an ISO day ("2026-03-24") and one sentence. The counts in the heads come from the lists' lengths, so nothing else needs editing; the header's "Eight releases, v6.3.1 to v6.5.1" is plain text, so update it with the data. Dates are fixed, never computed from today.
Can I add a third column, such as Improved?
Add another Group constant (a list, an icon and a label) and a third cell. The split is two columns on purpose: the divider, its + mark and the phone rule are drawn for one boundary, so a third column needs its own divider.
How are Added and Fixed told apart without colour?
By the head: an icon in a small plate (sparkles for Added, a wrench for Fixed), the word as a heading and a count. Nothing relies on colour, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon.
How does it fit on a phone and in a right-to-left layout?
Below lg the two columns stack, with a rule between them where the divider would be, and nothing scrolls sideways at 320 pixels. In a right-to-left layout Added moves to the right, Fixed to the left, and the divider stays between them, while the version numbers stay left to right.
Related
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Grouped Date Changelog
Lists and timelinesChanges grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Before After Changelog
Spotlights and mediaA compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.
- Pro
Release Range Comparison Changelog
Filters and browsingA split with two release selects, a count of what changed between them as New, Improved, Fixed and Breaking, and the releases in the range as an ordered list.
- Pro
Changelog Summary About
TimelinesA release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.