shadcn.io is not affiliated with official shadcn/ui
Component Library Changelog Block for React
Six components of a React library as rows with a version ladder of chips (solid for a major step, outlined for minor and patch, each with a word), a Breaking mark, and a collapsible list of the changes.
Installation
Overview
A component library changelog for React with Base UI, written for Bricklane, a fictional React component library. A header counts the components that moved and how many have a breaking change. Each row is a Collapsible whose trigger shows the component, a ladder of version chips (the version it started at, then each release, with an arrow between) and the date of the newest. A chip says in a word how big its step was, patch, minor or major, worked out from the two version numbers; a major step is solid. A component with a major step is marked Breaking. Opening a row lists its changes under the version that made them. It's built from Guides, Collapsible, Badge and Button, with CSS transitions for the entrance. For libraries that want a release to read at a glance. The components and versions are example data.
FAQ
How does a chip know it is a major step?
From the numbers alone: it compares the major numbers of a version and the one before it, then the minor numbers, and says major, minor or patch. A move from 0.10.0 to 1.0.0 is major. Nothing is typed twice.
What makes a row Breaking?
It has at least one major step in its ladder. The header's count and the marks are both worked out from the same versions, and the changes of a major release are also marked breaking in the open list.
Why does it not use colour?
A major step is solid foreground and the others are outlined, and every chip also says the word, so it reads in greyscale and follows your theme in light and dark.
Related
- AaAaPro
Design System Changelog
Packages and versionsA framed table of design-token changes where each old and new value is drawn as its kind (a corner, a gap, a shadow, a type sample) with the value as text, a New, Updated or Deprecated word, and a filter that dims instead of hiding.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
SDK Versions Changelog
APIs and integrationsClient libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.
- Pro
Package Changelog
Packages and versionsOne package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.
- Pro
API Versioning Matrix Changelog
APIs and integrationsA framed table of API versions with a status badge (Current, Supported, Deprecated, End of life), release and support-end days and a check or minus per capability, with a toggle group that rings one capability's column and says which versions have it.
- Pro
Condensed Feed Changelog
Lists and timelinesTwelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.