shadcn.io is not affiliated with official shadcn/ui
Split Layout Database Schema Hero Block for React
A split hero for a database tool: the headline, a Shine Button and three ticks beside a wide schema editor that runs flush to the page's end rail, with a model sidebar and a diagram whose foreign keys link to the rows they reference.
Installation
Overview
A split hero for Plinth, a type-safe ORM. The headline, a Shine Button with an outline second action and three short ticks sit on the start side. A divider separates them from a wide schema editor that starts a little way in and runs flush to the page's end rail, fading out at its foot. The editor has a title bar with the open file and the branch, a sidebar listing the models and the migrations (applied ones with a dot), and, on a dotted canvas, an entity relationship diagram: users and products on one side, orders on the other, each with its fields and their types, primary keys marked with a key and foreign keys with a link. Dashed connectors run from each referenced id to the foreign key that points at it, ending in a crow's foot on the "many" side. For ORMs, database platforms, migration tools and backend-as-a-service products.
FAQ
How do I show my own tables?
Edit the constants at the top of the file. TABLES holds the referenced tables, stacked in the first column, and ORDERS the table that references them, in the last; each has a name and its fields, each field a name, a type and, for keys, a constraint of pk or fk. RELATIONS says which foreign key points at which table's field, and the connectors are drawn from it. MODELS and MIGRATIONS fill the sidebar.
How do the connectors find the right rows?
They're worked out from the tables themselves. Every header is 32 pixels tall and every field row 24, so the middle of any row is known from its place in the list, and each connector runs from the referenced row's middle to the foreign key's. The referencing table is centred against the first column, which must stay the taller of the two. The numbers are named at the top of the file (HEADER, ROW, GAP), beside the classes they match.
How does the editor run to the rail?
The editor's cell clips what overflows it and has padding only at the top and the start. The window inside has no border on its end or its foot, so it meets the column's end rail exactly, and a mask fades its lower part out. Change the to_bottom mask to fade sooner or later.
How does a screen reader read the hero?
It reads the announcement as a link, then the headline (the block's one h1), the paragraph, the two links and the three ticks. The editor is an illustration of the product, so it is hidden from screen readers and inert, out of the tab order. If a detail of your schema matters to the pitch, say it in the copy.
How does the editor fit on a phone?
The columns stack below the lg breakpoint, with the text first and the editor under a rule with + marks, still flush to the end rail. Below sm the sidebar steps aside, so the diagram gets the whole width. The tables are real text; when one gets too narrow for its column types, they step aside so the field names keep their room. Nothing scrolls sideways down to 320 px.
Related
- Pro
Split Architecture Diagram Hero
Diagrams and mapsA reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.
- Pro
Split Layout GraphQL Query Hero
Code and terminalA showcase hero for a GraphQL gateway: the headline and the pitch with a Shine Button above a wide editor window in a hairline frame, with a schema explorer, a query that types itself in and its response.
- Pro
Split API Playground Hero
Code and terminalA showcase hero for a payments API: a headline, a Shine Button, a second action and three ticks, then a wide playground under its own rule: a POST request beside the 200 response, each JSON body writing itself out.
- Pro
Split Layout Commit Graph Hero
Code and terminalA reverse split hero for a code host: a commit history drawn as a branch graph in a hairline frame on the start side, then an announcement link, the headline, a Shine Button and three ticks.
- Pro
Split Spreadsheet Grid Hero
Product windowsA split hero for a finance spreadsheet: copy and a Shine Button at the start, and a wide sheet at the end that runs off the panel's rail and foot, with a formula bar, a total row, a tinted range and a teammate's cursor.
- Pro
Reverse Split Dot Grid Map Hero
Diagrams and mapsA reverse split contact hero on solid rails: an abstract dot map with a pulsing marker per office fills the first half up to a divider, beside a headline, a Shine Button and three offices as ruled rows.