shadcn.io is not affiliated with official shadcn/ui
Integrations Onboarding Block for Ark UI
A full-screen step with six tools as a hairline grid of tiles whose button goes Connect, Connecting and Disconnect, a search that marks matches without moving the grid, and a Continue that waits for one connection.
Installation
Overview
Connect the tools a team already uses before they see an empty product, with this step for React with Ark UI. It is a whole screen of Hingewick, a workflow hub: the page's rails and one band across it, a step header (“Step 4 of 6” over a hairline of Progress), and one framed panel. The panel holds six tools (Slack, GitHub, Figma, Jira, Linear and Notion), named in text with a two-letter tile, as a three by two grid of tiles that share hairlines. Each tile has a sentence and one button that goes Connect, Connecting for one short tick and Disconnect, with the state in a word beside the name. A search Input filters the tiles and marks what it matched with Search Highlight Text; “2 of 6 connected” counts them. Continue is the one Shine Button, quiet until one tool is connected, with Skip for now beside it.
FAQ
What does each tile's button do?
Connect starts a connection that lasts one tick of 1.2 seconds, during which the button reads Connecting and says so if pressed again; then the tile reads Connected and the same button becomes Disconnect, which takes effect at once. With reduced motion the tick is skipped and the tool is connected straight away. Every button is named for its tool (“Connect Slack”), and the count and the polite status line follow each change.
How does the search work, and why does the grid not move?
The field matches a tool's name or its sentence ignoring case and accents, and marks the matching letters. A tile that does not match keeps its place and hides its content, so the grid keeps its height and nothing below it jumps; if nothing matches, one line says so over the empty tiles and the Clear button, which is always on the same spot, brings them back. Enter in the field filters and does not submit the step.
Why is Continue quiet at first?
The step asks for one connection and says so: “Connect one tool to continue, or skip this step.” Continue stays visible but quiet until a tool is connected, and pressing it early says what is missing and puts focus on the first Connect button instead of doing nothing. Skip for now leaves the step with a sentence that connections can be added later in Settings.
Why are the logos letters?
Real services are named in text only, each with a neutral two-letter tile (Sl, Gh, Fg, Ji, Li, No) that is hidden from screen readers, because the name is always beside it. The tile is an icon slot: drop in a logo you have the rights to use, and never redraw a brand's logo.
What stays local in the demo, and how do I wire it?
Everything. Nothing connects to any of the six tools; “Connected” is a word in this tab, and the status line says “Nothing was sent.” In your app start the real authorisation where press says so and mark a tool connected when it succeeds, and save the result where submit says so. TOOLS holds the tiles and TICK the length of the wait.