shadcn.io is not affiliated with official shadcn/ui
Schema Diff Changelog Block for Solid
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.
Installation
Overview
A schema-diff viewer for Solid with Ark 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.