shadcn.io is not affiliated with official shadcn/ui
Invite the App Setup Integration Block for Svelte
An 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.
Installation
Overview
An integration setup section for Svelte with Ark UI, written for Pursefinch, a fictional spend approvals tool for teams, and its Slack connection. A compact header carries the mark pair at its end. Under a band rule a split sits behind a divider. At the start, three numbered steps: add the app (an "Add to Slack" Shine Button under the five scopes the install asks for, the same list as the detail section), invite it to the approvals channel (the /invite @pursefinch command in code with a copy button) and check that it joined. At the end, a framed drawing of the channel's member list: Pursefinch's row says "Not added yet", then waits with a small radar pulse once the app is added, and settles to "Joined" with a check when the buyer says they invited it. A polite status line is in the page from the start and says nothing is sent to Slack; a connected state shows a ghost Disconnect, never red. It's built from Guides, Button, ShineButton, CopyButton, Badge and Sonar, with plain CSS for the drawing and your theme's tokens for every colour. Slack is named in text only: no Slack logo, colour or wordmark ships with the block. The member names are example data.
FAQ
What is real here, and what stays on the page?
Nothing connects. Pressing the Shine Button, "I've invited it" or Disconnect only changes the block's own state, and the status line says so after every step: nothing is sent to Slack and no channel is read. The scopes, the channel name and the command are the ones a real install of this app would use; wire your own OAuth redirect and a check against your workspace where the demo changes state.
Is the invite step how Slack works?
Yes, in outline. An app installed in a workspace is added to a channel by typing /invite @appname there (or from the channel's details, under Integrations). An app without the chat:write.public scope can only post to channels it has joined, which is why the list asks for chat:write alone and the setup invites the app. The scopes shown are the same five as the detail and grid sections.
Why does the invited button wait for the first step?
Checking for the app only makes sense after it is installed. Until the Shine Button has been pressed the check button is marked unavailable and pressing it says why in the status line and moves focus back to the first step's button.
How do keyboard and screen reader users work it?
The steps are an ordered list; each heading starts with "Done:" or "To do:" for screen readers, and the number or check in front is decorative. Buttons keep their focus ring and their names. The member list is real text, and the status line is a polite live region present from load.
What moves, and what does reduced motion change?
The header fades up once on load, and the radar pulse in Pursefinch's row turns while the app waits for its invite. With reduced motion the header does not fade and the pulse holds still at 12 o'clock.
How does it behave on a phone and in right-to-left layouts?
On a phone the steps run first and the member list sits under them, full width, with its own rule between the parts. In a right-to-left layout the split and the step rail mirror with the page, while scopes, the channel name and the command keep their own direction.