shadcn.io is not affiliated with official shadcn/ui
No Integrations Empty State Block for React
An 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.
Installation
Overview
Show what an app can plug into before anything is plugged in, with this no integrations empty state for React with Base UI. A hairline frame with a plus mark on each corner holds the catalog of Sockethaus, an automation catalog. Tabs split it into Communication, Storage, Analytics and CRM, and each tab lists two or three real services named in text with a neutral two-letter tile, a line on what the catalog could do with it and an outline Toggle that reads Connect, then Connected. At the end of the frame a greyscale drawing of a board with six empty bays marks the next free one with a dashed outline; each connection puts the service's tile in that bay, and the count in the heading row goes up. The action foot holds the Shine Button, the only colored control, named for the next service to connect, and a quiet Start over. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the empty state of an integrations or connections page in any app.
FAQ
What happens when I connect a service, and what stays in the page?
Nothing is connected. The service goes into the page's state, its tile fills the next bay of the board, the count goes up and a polite status message says "Slack connected in this demo." Reload and the board is empty again; Start over empties it without a reload. To wire it for real, start the service's own authorization where the code says so, keep the toggle off until it answers, and show a failure in the status line.
Why does the board hold only six?
The drawing has six bays and the demo says so rather than pretend otherwise: a seventh connection is refused with "The board holds six. Turn one off." and the toggle stays off. The catalog lists nine services across four tabs, so the limit is easy to reach. Your own app has whatever limit your plan has, or none; replace the typed CAPACITY and the bays.
How does the button choose what to connect?
It is named for the first service not yet connected in the tab you are looking at, and it connects that one, so pressing it reads like pressing the toggle in front of you. When the tab is complete it moves on to the first free service in any tab, and once the board is full it says so and does nothing.
Why are the tiles lettermarks and not logos?
A service's logo and colours belong to its owner, so the block ships a neutral two-letter tile in an icon slot and names the service in text. A code comment marks the slot: drop in a logo you have the rights to use, under the service's brand terms. The letters are typed, so services that share an initial stay apart.
Is it usable with a keyboard and a screen reader?
The tabs follow the usual pattern: Tab reaches the tab list, the arrow keys move between tabs and Tab continues into the panel. Each toggle is named for its service ("Connect Slack") and exposes whether it is pressed. The board is hidden from assistive technology; the count, the toggles and the status message carry the same facts.
How does it look on a phone?
The board moves above the tabs and shrinks to 112 px tall. The tab list scrolls sideways inside its band, every row keeps one height, and the action foot is pinned to the bottom of the screen so the button stays in reach. From the medium breakpoint the board sits at the end of the frame beside the rows.
Related
- 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 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 Plugins Empty State
Apps and integrationsAn extensions store with nothing installed: tabs over a list of five plugins, the chosen one's detail with a drawn isometric shelf where a dashed cube hovers over its bay and turns solid when it is installed, and its permissions.
- Pro
No Data Sources Empty State
Data and analyticsA 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.
- Pro
Message Layouts Grid Integration
Cards and previewsAn integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.
- 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.