Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Schema Diff Changelog Block for React

A migration viewer: a Select of three migrations and an Unified or Split toggle draw the columns that were added, changed or removed as a diff table with signs and words.

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 schema-diff viewer for React with Base UI, written for Tablecraft, a fictional database change tool. A start-aligned header holds a Select of the last three migrations and, from the medium breakpoint, an Unified and Split toggle. Under it an inset frame with a + on each corner draws the chosen migration as a diff of columns in a focusable, scrolling region: a first line names the table, the day and what changed, counted from the data ("2 added, 1 changed, 1 removed"), then a table. Unified lists the columns once: an added column is a plus and the word "Added" in a heavier weight, a removed one a minus and "Removed" struck through, and a changed one two lines, the old definition struck through ("Was") and the new one after it ("Now"). Split sets Before and After side by side. Every migration in both layouts sits unseen in the same cell, so choosing never moves the page. It's built from Guides, Select and Toggle Group, with CSS transitions for the entrance and your theme's tokens for every colour. For migration reviews, release notes about the database and pull request summaries. The migrations are example data.

FAQ

How do I change the migrations?

Edit MIGRATIONS at the top of the file. A migration has an id, a name, the table, a date as an ISO day and its columns. A column has a name and either a now definition (the column was added), a was one (removed) or both (changed); a definition is a type and the rest of its line. The Select, the counts in the first line and both layouts come from that list.

How are added, changed and removed told apart without colour?

By a sign and a word in the first column, and by the text itself: a plus and "Added" in a heavier weight, a minus and "Removed" struck through, and for a changed column a minus and "Was" over a plus and "Now". The sign and word are read by screen readers; on a phone the word is kept for them and only the sign shows.

What does Split do, and why is it missing on a phone?

Split lays the same columns out as Before and After in one table, a changed column on one line, and writes "None" in the half where a column does not exist. It needs width, so the toggle appears from the medium breakpoint and on a phone the diff is always the unified list, even if Split was chosen on a wider screen.

Does the page jump when I pick another migration or layout?

No. Every migration, in unified and in split, is drawn once more, unseen and not reachable, in the same grid cell as the live table, so the cell is as tall as the tallest. Only the live table is in the accessibility tree.

How does it work with a keyboard?

The Select opens with Enter, Space or the arrow keys and closes with Escape. The toggle is one tab stop and the arrow keys move between Unified and Split. The table sits in a focusable region, so a wide definition scrolls with the arrow keys.

What moves, and what happens with reduced motion?

The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off. Choosing a migration or a layout swaps the table at once.

  • Pro

    Database Migration Log Changelog

    Data and config

    Four migrations as a band of accordion rows, the newest open: each row shows its id, name, status as an icon and a word and its run time, and opens to the SQL with Up and Down tabs and a Copy button.

  • 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.

  • Pro

    Code Diff Changelog

    Code and commits

    A diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.

  • Pro

    Diff Viewer Changelog

    Code and commits

    One config file's diff in a framed, focusable region, with Previous change and Next change buttons that move a ring from hunk to hunk and a live count.

  • 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

    Data Migration Changelog

    Data and config

    Five backfill jobs in a framed table: records, duration and a status as an icon, a word, a progress bar and a percentage, with a total in the headline and a Retry button for the failed job.

All 200 changelog blocks