Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Theme Preview Changelog Block for Vue

Three design-token releases beside a framed preview panel: a Light / Dark switch changes only the panel, showing a drawn invoice card and its three tokens by lightness.

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 changelog with a theme preview for Vue with Ark UI, written for Tonepair, a fictional design-tokens manager. A split: at the start a header and three releases (version, date, type tag, title, a sentence and the tokens it changed as mono chips); at the end, past a divider, a framed panel with a Light / Dark switch above a drawn invoice card and a list of the card's tokens with their lightness in the theme being previewed. The switch changes only the panel, never the page. The block follows your theme: the Dark sample is a picture of dark, and the Light sample stays light on a dark page. It's built from Guides, Badge and Switch, with CSS transitions for the entrance and your theme's tokens for every colour. For design-system sites and any changelog about colour. The releases and values are example data.

FAQ

Does the switch change my whole page?

No. It changes only the panel: the drawn card and the values under it. The page keeps your theme. If you want a real theme switch, the navbar and footer theme blocks change the page's dark class.

What does the switch start on?

The theme the page is showing: after the block mounts it reads the dark class on the document and sets the switch to match. Until then it shows Light, which is also what the server renders.

How does the panel stay light on a dark page?

The Dark sample is a dark scope. The Light sample swaps the two token pairs through --sample-ink and --sample-paper variables, so each picture stays what its name says in every theme. The card's own tones are mixes of those two tokens, so they follow your theme's colour.

Are the token values real?

They are example data: the lightness of each token in each theme, kept in TOKENS at the top of the file. Replace them with your own.

How does a screen reader know what changed?

The switch is named "Dark preview", the card is decoration and hidden from assistive technology, and a polite line says "Preview: Dark" or "Preview: Light" after each change. The caption and the token list carry the same facts as text.

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

Below lg the panel sits under the releases, separated by a rule. In a right-to-left layout the split mirrors; token names and values stay left to right.

What moves, and what happens with reduced motion?

The header and the content fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears.

All 200 changelog blocks