Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Observability Config Changelog Block for React

A split: four cells of changed config keys (Logs, Traces, Metrics, Instrumentation) beside the resulting file with a line gutter, plus and minus signs and a Copy config button.

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 config change for React with Base UI, written for Scopeview, a fictional application monitoring tool, as a split. A start-aligned header counts the changed keys from the data ("7 keys changed across 4 sections"). Under a band rule, the start side is four cells on shared hairlines (Logs, Traces, Metrics and Instrumentation), each listing only the keys that changed: the key in mono, a tag with a glyph and a word (Added, Changed, Removed) and, for a changed key, the old value struck through and the new one after an arrow. The end side, across a hairline divider that meets the band's rule at a +, is the resulting file in a focusable, scrolling code region: a line gutter, a plus or a minus in the margin of every changed line (with a word for screen readers) and a Copy config button that copies the new file without the removed lines. On a phone the cells come first and the code follows. It's built from Guides, Badge and Copy Button, with CSS transitions for the entrance and your theme's tokens for every colour. For release notes that change settings and monitoring or logging upgrades. The keys are example data.

FAQ

How do I change the keys?

Edit SECTIONS at the top of the file. A section has an id, a name and its entries; an entry has a key and a was and a now value. Leave out was for a key that was added, leave out now for one that was removed, and give both the same value for a key that is only there for context. The cells, the margin signs, the line numbers, the count in the headline and the copied file are all built from that list.

How are the changed lines told apart without colour?

A plus or a minus sits in the margin, a changed line is heavier and a removed one is struck through; screen readers hear "Added" or "Removed" before each line. In the cells, a tag with a glyph and a word (Added, Changed, Removed) names each key, and a changed key reads "Was" and "Now" around the arrow.

What does Copy config copy?

The new file only: unchanged lines and added lines, in order, without the minus lines and without the line numbers or margin signs, so it can be pasted straight into a config. It then says "Copied the new config" in a polite status line, or that it couldn't copy.

How does it fit on a phone?

The four cells stack in one column, then the code window follows with its own hairline above it. Long lines scroll sideways inside the window, which is a focusable region, so the page never scrolls sideways.

What happens in a right-to-left layout?

The cells and the divider mirror. Keys, values and the file keep their left-to-right reading order because configuration is code, and the line numbers stay with their lines.

What moves, and what happens with reduced motion?

The header and the split fade up once on load, with CSS transitions. With reduced motion they are off. Nothing else moves.

  • Pro

    Config Changes Ledger Changelog

    Data and config

    A change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.

  • Pro

    Environment Config Diff Changelog

    Data and config

    A staging against production table in a fixed-height scroll region with grouped settings, masked secrets, a result as a shape and a word, and a Mismatches only switch.

  • Pro

    Alert Rules Changelog

    Incidents and uptime

    Six changed alert rules as cells on shared hairlines, each with a threshold track showing the old marker hollow and the new one solid, the figures in words, the channels it reaches and its severity, with a channel toggle that steps back the rules that never reach it.

  • Pro

    API Response Time Changelog

    Metrics and charts

    Paired bars for five endpoints on a shared 0 to 400 ms axis, the previous release pale and this one solid, with the change in rolling percent digits, the optimisation behind it and a p50, p95 or p99 toggle that redraws the bars.

  • Pro

    Error Budget Burn-Down Changelog

    Incidents and uptime

    A thirty-day error-budget burn-down with release flags you can pick, an incident ring, a table of each release's consumed share and burn rate, and a short list of figures.

  • Pro

    Database Schema Changelog

    Data and config

    A relations diagram after one release: five table cards joined by foreign-key lines, the new table, the new column and the changed column each tagged with an icon and a word, and the three migrations behind it as a list.

All 200 changelog blocks