shadcn.io is not affiliated with official shadcn/ui
Connect Tools Empty State Block for React
A 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.
Installation
Overview
Give an account with nothing connected a picture of what it is about to have, with this connect tools empty state for React with Base UI. It's the first-run page of Spokewick, an integration hub: 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. At the end of the band sit the heading, one sentence and six tool cards, each a Label around a Checkbox with a two-letter tile, the tool's name and its kind in a Badge. At the start a greyscale drawing of a hub stands where a product's mark would: a core, six dashed spokes and six empty sockets on a rim. Ticking a card turns its spoke and socket solid and puts its lettermark in the socket; the Shine Button, the only colored control, counts the ticks ("Mark 3 tools") and fills the core when pressed. Real services are named in text with a neutral lettermark tile, never a logo. It's built from Label, Checkbox, Badge, Button, Shine Button and Guides, with CSS transitions only. For a first-run screen in any app that links to other tools.
FAQ
What happens when I press Mark tools, and what stays in the page?
Nothing connects. The ticked tools are kept in the page's state, the hub's core fills, and a polite status message says "3 tools marked; nothing is connected in this demo." Ticking or unticking a card clears the mark again. Start over empties the hub. To wire it for real, start each tool's own authorization flow where the code says so, keep a card ticked until its connection answers, and show a failure on that card.
Why does the button look off before I tick anything?
A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason: pressing it with nothing ticked says "Tick at least one tool first." and moves focus to the first card's checkbox. Once a tool is ticked the label counts them and the button turns on.
How does the drawing react without moving anything?
It is one inline SVG that never swaps: each spoke and socket has a solid twin that fades in over its dashed one, and the core has a filled twin, all with opacity transitions that are switched off under reduced motion. The lettermark in a socket is real text laid over the drawing, never SVG text, so it follows your font. The drawing is decorative and hidden from screen readers; the cards, the count and the status message say what happened.
Why are the tiles lettermarks and not logos?
A tool'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 lettermarks are typed, not derived, so tools that share an initial stay apart.
How does it look on a phone?
The hub moves above the heading and shrinks to 140 px tall. The cards stay two across, with the tile and the checkbox on one line and the name under them, and the kind drops to a screen-reader-only word. The status message is read aloud rather than shown, so the button stays on the first screen. From the large breakpoint the hub sits at the start of the band beside the content, 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 six checkboxes, Mark tools and Start over, which stays quiet (and says so if pressed) until there is something to undo. Each box is named by its tool and described by its kind, and the count in the heading row and the button's label follow every change. The hub is hidden from assistive technology.
Related
- 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
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
Welcome Workspace Empty State
First runA full-height welcome page for a fresh workspace: an isometric plan of an empty studio whose four rooms are a choice group, one sentence about the room you picked, and one Create your first project link.
- Pro
Invite the App Setup Integration
Choose and verifyAn integration setup section for a spend approvals tool connecting to Slack: three steps (add the app under its five scopes, invite it with a copyable command, check that it joined) beside a drawn member list with a radar pulse that settles to Joined.
- 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.