shadcn.io is not affiliated with official shadcn/ui
Design System Changelog Block for React Aria
A 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.
Installation
Overview
A design system changelog for React with React Aria, written for Tokenwell, a fictional design-system manager. A header with a Toggle Group filter (All, New, Updated, Deprecated, each with a count) sits over a framed table. Each row is a token's name in mono, what it looked like before and after drawn as its own kind of preview (a rounded square for a radius, a bar of the spacing step, a card with its shadow, the letters Aa at the type's size and weight; never a colour swatch), the values as struck old and bold new text, and a change word with an icon. It's built from Guides, Badge and Toggle Group, with CSS transitions for the entrance. For release notes that show what a token change looks like. The tokens are example data.
FAQ
How is each preview drawn?
From the typed numbers of the token: a radius sets the corner of a square, a spacing step sets the width of a bar, a shadow sets a card's offset and blur from the foreground colour, and type sets the size and weight of the letters Aa. The text value beside it comes from the same numbers.
How does a token get its New, Updated or Deprecated word?
From the data: a token with no before value is New, one with no after value is Deprecated, and the rest are Updated. The filter's counts are worked out the same way.
Why does the filter dim rows instead of removing them?
So the table never changes height or jumps. The rows that do not match take a solid five per cent tint and softer text, and a status line says how many are shown. One filter choice is always on, and the arrow keys move between them.