Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Theme Preview Changelog Block for React

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 React with Base 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.

  • Pro

    Design System Changelog

    Packages and versions

    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.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Category Sections Changelog

    Filters and browsing

    A changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.

  • Pro

    Compact Timeline Changelog

    Lists and timelines

    The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.

  • Pro

    Dark Mode Navbar

    Surface and theme

    A tinted full-bleed navbar whose Appearance button opens a popover of three pictures, Light, Dark and Match system, that really switch the page's theme.

  • Pro

    Theme Toggle Footer

    Preferences

    A slim footer for a design-token editor with a theme button that cycles light, dark and system and really changes the page's theme.

All 200 changelog blocks