shadcn.io is not affiliated with official shadcn/ui
Integration Added Success Block for React
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 Base 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 render set to an a element and nativeButton={false}. 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.
Related
- 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
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- Pro
SSO Test and Enforce Success
Security and accessA single sign-on confirmation inside an app panel: the connection's metadata with real copy buttons, a Test sign-in that passes locally and unlocks a Require SSO for everyone switch, and an alert dialog that confirms it.
- Pro
Webhook Endpoints Settings
API and webhooksA webhook endpoint settings sheet open over the endpoint list: an https URL, an event tree with mixed-state group checkboxes, a signing secret with Roll secret, and recent deliveries where a failed one can be resent with its signature worked out in the browser.
- Pro
Analytics Connected Success
Integrations and syncsA confirmation window for connected analytics: a counting events-a-minute figure, a table of the first eight events that fade in and a bounded feed with Pause, and a docked panel of the chosen event's properties in a JSON tree.