shadcn.io is not affiliated with official shadcn/ui
Integration Added Success Block for Radix UI
A confirmation panel for a new Slack connection: the first alert drawn as a greyscale message that a channel menu redraws, the two marks, the workspace and scopes, a local test message and one Open settings button.
Installation
Overview
Show people what their new connection will do before it does it, with this confirmation panel for React with Radix UI. It is the Relaybird page after the app was connected to Slack, as a panel under a compact header. One half is the first message, previewed: a drawn, greyscale post with a channel bar, the app's tile and name, a title, two fields and a button, which the channel Native Select redraws. The other half holds the two marks (Relaybird's tile and a neutral lettermark tile for Slack, which is named in text only), the workspace and the two scopes the app asked for, that menu in a Field, and an outline Button, Send a test message, which only says the preview is shown in this demo. The foot has the one Shine Button, Open settings. Nothing is connected or sent. For any integration's first screen after the connect flow, which the setup block of the same service covers.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was connected and nothing was posted. The workspace, the three channels, the scopes and the message are typed constants at the top of the file. Send a test message only sets the status line to "Preview shown in this demo; nothing was posted to Slack." To wire it, read the workspace and its channels from your own connection record (listing channels is what the channels:read scope is for), post the real test message through your Slack app with chat:write in the button's handler, and show a failure in the same status line.
Is the message preview accessible?
The drawing is hidden from assistive technology because it is a picture of a message, not a control, and its words are given once in text instead: a screen-reader-only sentence names the channel, the title, both fields and the button, and a short caption under the picture names the channel it is shown in. The drawn Acknowledge button is a chip, not a button, so nothing in the preview takes focus.
What does the channel menu change?
It redraws the channel bar of the preview and says "Previewing #oncall. Nothing was posted." in the status line, which is the block's one live region. The menu is a native select, so every device brings its own picker, and its label is "Post alerts to".
How are the two services shown without their logos?
By their names and two-letter lettermark tiles: ours is filled and the service's is a neutral bordered tile ("Sl"), both hidden from assistive technology with the name always in text beside them. Each tile is an icon slot: drop in a logo you have the rights to use, under the service's brand terms, and never redraw a brand's logo. The page uses no brand colour.
Are the permissions real?
They are the two Slack scopes a posting app needs: chat:write to post messages as the app and channels:read to list public channels, set in code and followed by what they do. Edit SCOPES to the scopes your own app requests, and keep the list to exactly those.
Where does Open settings go, and how does it look on a phone?
Open settings is a link to your own route. It is a Shine Button with asChild around an a element. On a phone the message preview comes first, the controls follow, and the foot with Open settings is pinned to the bottom of the screen while the panel scrolls.