shadcn.io is not affiliated with official shadcn/ui
No Integrations Empty State Block for Solid
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 Solid with Ark 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.