Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Database Migration Log Changelog Block for Ark UI

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 Ark 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. The up and down arrows also move between the migration rows.

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.

All 200 changelog blocks