shadcn.io is not affiliated with official shadcn/ui
Two Column Split Changelog Block for Vue
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 Vue with Ark 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.