shadcn.io is not affiliated with official shadcn/ui
Slack Integration Settings Block for React
A Slack notification settings panel: a table of events with a channel, a mention and a switch each, beside a drawn message from the bot that follows the chosen row and a bot name with its own check.
Installation
Overview
Let people choose where each event goes and see the message before it is posted, with this Slack integration settings panel for React with Base UI. A hairline frame with a plus mark on each corner opens with Slack named in text and a two-letter tile, never its logo or colors, and a sentence worked out from the choices ("posts 3 of 4 events to Slack as Belfry; the preview shows Deploy failed in #deploys, with @here"). A native table lists four events (deploy failed, new signup, invoice paid, error spike); each row has a radio that picks it for the preview, a Native Select for the channel, another for the mention (none, @here or @channel) and a Switch. Beside the table a message is drawn in the theme, with the bot's tile and name, a fixed time, the mention, a first line and three details; it follows the chosen row, and a Send test button draws it as a test, or says to turn the event on first. The bot's name is an Input with a check on its length. An action foot counts unsaved changes beside a Shine Button that saves them in the page. On a phone each row is a card with its two selects side by side. It's built from Native Select, Switch, Input, Field, Badge, Button, Shine Button and Guides, with a CSS entrance only. For a deploy tool, an incident product or any app that posts to a chat workspace.
FAQ
How do I add an event or a channel?
Add an event to KINDS with its label, a short hint for what fires it, the first line of its message and three details, and a row for it in SAVED with its channel, mention and on or off. Channels are the names in CHANNELS, without the hash, and MENTIONS lists the choices. The table, the preview and the sentence on top all read from those lists, so a new event appears in all three.
Is the message real, and which Slack features does it show?
It is drawn from sample data in the theme, the way a message looks in a channel: the bot's tile and name, the time, a mention, a line of text and a short list of details with a bar at its start. It is not Slack's real layout, which varies by client and workspace, and it carries no logo or Slack colors. Slack is named in text beside a two-letter tile, an icon slot where you can drop in a logo you have the rights to use.
What does Send test do, and is anything posted?
Nothing is posted. It draws the chosen event's message with a Test message badge, and the status line says it was drawn for the channel and was not sent to Slack. An event that is off refuses the test, says to turn it on first and moves focus to its switch. Editing any setting clears the badge, since the test no longer matches what is on screen.
What stays local, and how do I make it real?
Everything. Save keeps the choices in this page's state, and the channels, the workspace and the connection date are typed sample data. To make it real, connect through Slack's OAuth flow, list the workspace's channels from its API into the selects, store a row per event on your server and post from the event handlers with the channel and the mention each row names. Send test would post the drawn message to the chosen channel.
Is it accessible, and how does it read on a phone?
The table has a caption and column headers, each row's controls are named for their event ("Deploy failed: channel"), and the radio that picks a row for the preview is in the first cell, with a sr-only note on the chosen one. The message is real text, not an image, so it reads as written. Below the medium breakpoint each event becomes a card: its name and switch on the first line and the two selects under it, each with a visible label.
Related
- 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
A connected apps settings panel with a permission review sheet: each app asks for permissions shown as switches with what they allow, a pause, and a disconnect that confirms first.
- 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
Incident Escalation Settings
Alerts and auditAn escalation policy on a vertical rail whose axis is the clock: tiers with a target, a channel group and a timeout, cumulative minutes on every node, add, move and remove, and a re-page switch.
- Pro
Alert Rules Settings
Alerts and auditAn alert rules panel where each rule is a sentence you edit in place with menus and a number field, beside a framed chart of its metric with the threshold line and a computed count of how often it would have fired.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.