shadcn.io is not affiliated with official shadcn/ui
Message Layouts Grid Integration Block for React
An integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.
Installation
Overview
An integration grid section for React with Base 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, a Listbox of six message layouts (an approval request, a decision in the thread, a budget check, a declined card alert, a receipt reminder and a daily digest), each with where it appears; the arrow keys move the choice and the preview follows, and on a phone the same list runs sideways as a row of tabs. At the end, a framed preview draws the chosen layout as a greyscale message: the app's tile, its name with the APP tag and a time, the text, a few facts, drawn action chips and a context line. Every layout is drawn in one grid cell with the live one on top, so the preview never changes height. A polite status line says the previews are drawings and nothing is posted. The page's rails and top rule come from the Guides spine. It's built from Guides and Listbox, 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 amounts and names are example data.
FAQ
How do I change the layouts and their figures?
LAYOUTS holds each layout: its label, where it appears, the header line, the text, a few facts, the action chips and the context line. The amounts come from REQUEST, BUDGET and WAITING, and the sentences that quote them ("$180.00 over her limit", "3 requests are waiting, $1,070.00 in all") are worked out from those numbers. Add a layout by adding an entry; the list, the preview and the height-holding copies all read the same array.
Are these real Slack message features?
They use what an app with the chat:write and commands scopes can do: post to a channel or a thread, send a direct message, add buttons to a message, and answer a slash command with a reply only the person who typed it can see. The preview is a drawing in your theme's tokens, not a Slack render: your messages take Slack's own look. No poll layout is offered because that would need more scopes than the integration asks for.
Does picking a layout post anything?
No. The choice only changes the preview, and the status line says so from the start and after every choice. The action chips are drawn, not buttons. Wire your own handlers where you build the real messages.
How do keyboard and screen reader users work it?
The list is a Listbox named "Message layouts": arrow keys move the choice and select it, and the preview follows. The preview is a figure whose caption names the layout, and its text is real text. Only one of the two lists is on screen at a time, and the unseen copies that hold the height are hidden from assistive technology.
How does it behave on a phone and in right-to-left layouts?
On a phone the layouts become a sideways row above the preview, with a rule under the chosen one; the preview keeps its full width. In a right-to-left layout the split mirrors with the page, and amounts, times and the command keep their own direction. The only motion is the header's fade-up on load, and reduced motion turns it off.
Related
- 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
Sentry List Integration
Grouped and triagedAn integration list section for a release gate working with Sentry: a summary of a release's issues beside a ranked list that re-sorts by newest, most events or most users, with each issue's level, title, events, users and a hand-drawn line.
- Pro
Token Collections Grid Integration
Switch and tick gridsAn integration grid section for a design-docs tool connected to Figma: four variable collections (Colour, Type, Radius, Spacing) on shared hairlines, each with a mode switch that redraws its greyscale sample and a switch for syncing it to a tokens file, with a live tally.
- Pro
Datadog Grid Integration
Switch and tick gridsAn integration grid section for a post-incident review tool connecting to Datadog: six embeddable sources as drawn, whole-card checkboxes with a limit of four per review and a counter that follows the choices.
- Pro
Split View FAQ
NavigationA master-detail FAQ for a sales CRM: a list of eight questions at the start and the chosen answer in a framed panel at the end, with a Next question button.
- Pro
Integration Logo Mark Grid Features
App screensA tabbed integration directory for an integration hub: twelve tiles with abstract monograms, each with a connect switch, three category tabs and a live count of what is connected.