shadcn.io is not affiliated with official shadcn/ui
No Data Sources Empty State Block for Radix UI
A full-height page for a data platform with no source yet: a segmented choice of database, file or API with that kind's fields, and a line drawing of a source pointing at a dashed data box that turns solid once the source is added.
Installation
Overview
Give a new workspace a first source to add instead of a blank screen, with this no data sources empty state for React with Radix UI. It's the data sources page of Aquiferdb, a data platform: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, split in two with the drawing first. At the start an outline drawing shows a source box, holding a cylinder, a sheet or a bracketed endpoint by the kind chosen, pointing by a dashed arrow at an empty, dashed data box. At the end sit the heading, one sentence, a Segment Group for the kind of source and that kind's fields: a host and a database name in Fields, a File Upload drop zone for a .csv or .json file, or a base URL and a header name. The Shine Button, the only colored control, adds the source; the arrow and the data box turn solid and the form gives way to the result in the same space. It's built from Segment Group, Field, Input, File Upload, Button, Shine Button and Guides, with CSS transitions only. For the data sources, connections or datasets page of any platform that reads from elsewhere.
FAQ
What happens when I press Add data source, and what stays in the page?
Nothing connects and nothing is saved. The source's name (the database, the file or the host of the URL) goes into the page's state, the drawing turns solid and a polite status message says "orders added in this demo. Nothing connects." Start over puts the form and the empty drawing back. To wire it for real, send the values to your API where the code says so, test the connection before you call it added, and show a failure under the field that caused it. Never ask for a key or a password in a page like this: collect only where it lives, and let the server side handle credentials.
Does the file go anywhere?
No. The drop zone lists the file's name and size from the browser's own File and never reads or uploads it, and the block says so on the zone. A file that is not .csv or .json is refused with a sentence under the zone. For a real upload, send the file where your server expects it and show its progress.
How does the drawing react without moving anything?
It is one inline SVG that never swaps: the cylinder, the sheet and the bracketed endpoint are all in it and only the chosen kind is visible, and the solid arrow and data box fade in over the dashed ones when the source is added, with opacity transitions that are switched off under reduced motion. The words (the kind, Your data) are real text laid over the drawing. The drawing is decorative and hidden from screen readers.
What if a field is empty or wrong?
The button stays in the tab order and keeps its reason: it points at the line under it, which says what the chosen kind needs. Pressing it, or Enter in a field, with something missing writes a problem under the first field that needs it and moves focus there. A URL has to start with https:// (or http://). Typing clears the message. Switching kinds keeps what you typed for each kind.
How does it look on a phone?
The drawing moves above the heading and shrinks to 140 px tall, the kind switch spans the width and the button is pinned to the bottom of the screen so it stays in reach while you fill the fields. From the large breakpoint the drawing is at the start of the band beside the form, divided by a rule that meets the band's rules at plus marks.
Is it usable with a keyboard and a screen reader?
Tab runs through the kind switch (arrow keys change the kind), the fields of that kind, the drop zone and the button; the fields of the other kinds are not reachable. Each field is labelled and tied to its problem line, the result takes focus on its heading and the status message announces it. The drawing is hidden from assistive technology.