shadcn.io is not affiliated with official shadcn/ui
Message Layouts Grid Integration Block for Radix UI
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 Radix 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.