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