Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Design System Changelog Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A design system changelog for Vue with Ark UI, 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.

Why are there no colour swatches?

The previews follow your theme: foreground and background tones only, so the table works in any theme and in greyscale. Colour tokens are a different block.

How does it fit a phone and a right-to-left layout?

On a phone the value text and the change word move under the token's name and the two previews stay. The table scrolls sideways in a focusable region if it must, and values keep their left-to-right order in a right-to-left page.

All 200 changelog blocks