shadcn.io is not affiliated with official shadcn/ui
Database Migration Log Changelog Block for React Aria
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.
Installation
Overview
A migration log for React with React Aria, 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.