shadcn.io is not affiliated with official shadcn/ui
Database Schema Changelog Block for Radix UI
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.
Installation
Overview
A schema changelog for React with Radix UI, written for Relatewell, a fictional database studio. A framed stage draws five table cards, each with its columns and their types, joined by foreign-key lines: one stroked curve per key, a dot on the column that holds the key and a ring on the column it points at. The new table is tagged New, the new column New and the column that changed type Changed, each an icon and a word. Pressing a table's name marks its relations: the lines that touch it turn heavier and the columns at both ends of them are shaded. Under the diagram an ordered list names the three migrations behind the release, newest first. From the xl breakpoint the cards sit on the stage with the lines between them; below it they stack in a grid and every foreign key says what it references in words. It's built from Badge, Guides and hand-built SVG and CSS, with CSS transitions for the entrance and your theme's tokens for every colour. For schema histories, database tools and release notes with a data model. The tables and migrations are example data.
FAQ
How do I change the tables?
Edit TABLES at the top of the file. A table has an id, a top and an x (its place on the stage in pixels and in percent of the stage's width) and its columns; a column has a name, a type, pk, an fk (the table and column it points at) and an optional mark (NEW or CHANGED). The cards, the foreign-key curves and the dots at their ends are all computed from that list.
How are the lines drawn and kept in place?
Each row of a card is a fixed 28 pixels and each header 36, so a column's height on the stage is known. A small helper turns every foreign key into one cubic curve in a 100-wide, stretched SVG and two dots placed with CSS variables, so the lines follow the cards as the stage changes width. The drawing is hidden from assistive technology; the same facts are in words on every foreign-key row, and the list of tables is real HTML.
What does pressing a table's name do?
It marks that table's relations and presses its name button (aria-pressed): the lines touching the table turn heavier, and the columns at both ends of each one get a solid shade, which also works on the stacked cards of a phone where there are no lines. Pressing it again, or another table, takes it back. It only changes local state.
How are new and changed told apart without colour?
By an icon and a word: sparkles and "New", a pencil and "Changed". A new table also gets a heavier border. A screen reader hears "was text" after the changed column's type.