shadcn.io is not affiliated with official shadcn/ui
Database Browser Schema Form CRUD Block for Ark UI
A database console window with a table rail, a row grid with a sticky key column, a schema toggle, and a strip whose form is built from the table's columns, with required, typed and referenced fields refused by name.
Installation
Overview
Show a database the way a developer wants to poke at it, with this console for React with Ark UI. It is a window: a rail of three tables with row counts (a Native Select below the medium breakpoint), the rows of the chosen one in a native grid whose key column stays in view while the rest scrolls sideways, and a strip at the foot with a form built from the table's schema: an Input for text, a whole number or a date, a Switch for a boolean, the key read-only and NOT NULL columns marked required. New row, the one Shine Button in the top bar, blanks the strip; Save row, Cancel and Delete row sit in the strip, and a save names every column it refuses (a bad email, an unknown customer, a duplicate SKU). A Schema Toggle swaps the grid for the column list. For admin consoles, internal tools and data viewers.
FAQ
How is the form built from the schema?
Each table is a SCHEMA line of columns written as name:kind:flags:reference, with kinds int, text, email, date and bool and flags nn (NOT NULL) and uniq. The strip maps each column to a control from its kind, marks required ones with an asterisk, and runs the same column rules at save: a whole number, a real date, an email shape, a reference that exists, a value that is not already used. To add a table, add a schema line and its ROWS lines.
How are keys and new rows handled?
The key column is read-only; a new row shows "auto" and takes the next key on Save, so two rows never share one. Choosing another row drops unsaved changes to the first and says so in the foot. Cancel puts the saved values back, or drops a new row.
How do I move through the rows with a keyboard?
The first cell of each row is a native radio, so the whole grid is one group: Tab enters it, the arrow keys move the choice and the strip below follows. The key column stays put as the other columns scroll sideways, and the rail and the table select are plain buttons and a native select.
What does Delete row do, and can I undo it?
It removes the chosen row at once and moves the choice to a neighbour. The foot says "Deleted row 3 of customers." and offers Undo, which restores the table as it was. A delete in the strip is disabled in the Schema view and for a row that is not saved yet.
What stays local, and how do I wire a real database?
The three tables live in state in this tab, nothing is queried and a reload brings the originals back. In your app load the rows from your API, keep the validation on the server, and run the save, delete and undo as parameterised statements or endpoints; never build SQL from the form's text.