shadcn.io is not affiliated with official shadcn/ui
No Data Sources Empty State Block for React
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 Base 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.
Related
- Pro
No Connected Apps Empty State
Apps and integrationsA connected apps page with nothing connected: three apps to choose from, the scopes the chosen one would ask for (one required, two optional) and a drawn plug that moves toward a wall socket as choices are made, without ever reaching it.
- Pro
No Integrations Empty State
Apps and integrationsAn integrations catalog with nothing connected: tabs by category over real services with Connect toggles, and a drawn board of six empty bays that takes a lettermark tile in the next free bay as each one is connected.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.
- Pro
No Files Empty State
Files and docsA file manager's empty All files page in a framed window: the catalog sidebar with its counts, a large dashed drop zone with a drawn filing drawer, and a table that lists the files you choose or drop.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Analytics Empty State
Data and analyticsA web analytics page with no visits counted yet: an empty chart with a dashed baseline that a Preview with sample data switch fills with 14 typed days, a 7 or 14 day range and a legend worked out from the data.