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