Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Database Migration Log Changelog Block for React

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.

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 migration log for React with Base UI, written for Schemaleaf, a fictional database migration runner. Under a compact header sits a band of four rows from rail to rail, each an accordion trigger with the migration's id (its day and a counter), its name in mono, its status as an icon and a word (Applied with a check, Pending with a clock) and how long it took to run. The newest, still pending, is open on load. Its panel has Up and Down tabs over the SQL in a focusable region and a Copy button that copies whichever tab is showing and says so to screen readers; a line under it says when the migration was written and what it does. Every region is the same height, so switching tabs never moves the page. It's built from Accordion, Tabs, Copy Button, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For migration runners, schema histories and release notes that show the SQL. The migrations and their SQL 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, a date, an up and a down SQL string, a one-sentence gist, a ran text ("1.8 s", or "Not run" for a pending one) and a phase (APPLIED or PENDING). The headline counts, the open row and every panel come from that list.

How is a pending migration told apart without colour?

By an icon and a word: a check and "Applied" against a clock and "Pending", with "Not run" where the run time would be. There is no status colour, so it reads the same in a greyscale theme.

What does the Copy button do?

It copies the SQL of the tab that is showing, swaps its icon for a check and, through a polite status line, tells screen readers "Copied the up SQL of add_invoice_status". If the clipboard refuses (a page not served over HTTPS, no permission) it says it couldn't copy. The SQL is also plain text in a focusable region, so it can be selected by hand and scrolls sideways on a phone.

How does it work with a keyboard?

Each row's trigger is a button: Enter or Space opens and closes it, and one migration is open at a time. Inside the panel Tab reaches the Up and Down tabs, the arrow keys switch between them, and Tab then reaches the Copy button and the SQL region. Tab moves between the rows; the arrow keys don't.

Why doesn't the panel change height between Up and Down?

Each SQL region has a fixed height and scrolls inside itself, so a longer statement never pushes the rows under it. Opening another migration does change the block's height, as an accordion should.

What moves, and what happens with reduced motion?

The header and the band fade up once on load, with CSS transitions, and a row's panel opens with the accordion's own animation. With reduced motion they are off and the block simply appears. Copy's icon swap has no scale with reduced motion.

  • 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

    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.

  • Pro

    Schema Diff Changelog

    Data and config

    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.

  • Pro

    Migration Guide Changelog

    APIs and integrations

    A split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.

  • Pro

    Commit Log Changelog

    Code and commits

    A git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.

  • Pro

    Cherry-Pick Log Changelog

    Code and commits

    A table of eight cherry-picks with a Checkbox per row and a result word, a Target branch Select that filters it, and a script of the ticked picks with a Copy script button.

All 200 changelog blocks