shadcn.io is not affiliated with official shadcn/ui
Notes From The Desk Changelog Blog Block for React
The publication's own changes written as posts: entries with a large version numeral and date at the start, grouped Added, Changed and Fixed lists, and Show earlier notes in a Collapsible.
Installation
Overview
A blog changelog for React with Base UI, written for the Colophon Log, a publishing-tools blog: the site's own changes written up like posts. A start-aligned header sits over a list of entries that runs from rail to rail. Each entry is an article in two cells split by a rail: at the start the version in large numerals with its fixed date (it stays in view while its entry scrolls on wide screens), at the end the entry's title and what it Added, Changed and Fixed under plain headings. Three entries show; Show earlier notes opens two more in a Collapsible and keeps its label. It's built from Badge, Collapsible and Guides. The numerals are the cover; there are no images. The notes are example content.
FAQ
How do I add an entry?
Add an object at the top of NOTES: a version, a fixed ISO date, a title and groups, each with a label (Added, Changed or Fixed) and its items. The first three show; the rest sit under Show earlier notes. The newest version gets the Latest badge.
How does Show earlier notes work?
The button keeps its label and turns its chevron; aria-expanded says whether the older notes are open. The older entries are hidden and inert while closed, so the keyboard cannot reach them.
The Collapsible takes open and onOpenChange with the new value.
What stays in view as I scroll?
From md the version and date are sticky inside their entry, so they stay beside a long list of changes until the entry ends. On a phone the rail folds into the row: the version and date share a line above the title and nothing is sticky.
How are the headings arranged?
The block has one h2, each entry's title is an h3 and Added, Changed and Fixed are h4s, each over a real bulleted list. The version is a paragraph that reads "Version 4.2".
Related
- Pro
Diff Revision History Blog
Stats and draftsThe revision history of one post: five revisions as a radio group at the start, and at the end a framed word-by-word diff of the lede with inserted and deleted marks for the chosen revision.
- Pro
Vote Board Roadmap Blog
Reader feedbackUpcoming posts as numbered rows: a vote toggle with a rolling count, the title and what it will argue, and a drawn four-segment stage meter from Researching to Scheduled.
- Pro
Rail Timeline Blog
Archives by dateA local-history society's notebook as a vertical rail: a band per year, the year sticky at the rail's start, and dated entries hung off the rail on dots.
- 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
Drafts Desk Blog
Stats and draftsA drafts list for a writing-tools blog: each row has a status badge, a progress bar with its word count, the fixed time it was edited and a menu to edit, duplicate or archive it.
- Pro
Announcement Blog
Featured storyA notice board: the lead announcement as a split with a framed card-in-card panel and a Shine Button, and the past announcements as a description list band.