Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Approvals by State Tabs Integration Block for Radix UI

An integration list section for a spend approvals tool posting to Slack: underline tabs with counts (Waiting, Approved, Expired) over rail-to-rail request rows, with a channel in code, a state line, a reminder count and a Nudge button on waiting rows.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration list 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, underline tabs show a count each (Waiting, Approved, Expired, all worked out from the rows). Each tab opens a rail-to-rail list of the requests Pursefinch posted: the request and who asked for how much, the channel in code, a state line with a glyph (how long it has waited, who approved it and when, or that it expired) and a bell with the number of reminders sent. A waiting row has a ghost Nudge that turns to Nudged and adds one reminder. Every panel is drawn in one grid cell with the live one on top, so switching tabs never moves the page. A foot band holds a polite status line, present from load, saying nudges stay on the page and nothing is posted to Slack. It's built from Guides, Tabs and Button, with your theme's tokens for every colour. Slack is named in text only: no Slack logo, colour or wordmark ships with the block. The requests, names and amounts are example data.

FAQ

How do I change the requests?

APPROVALS holds every row: the request, who asked, the amount, the channel, the state line, the reminders already sent and its state. The tabs, their counts and the panels all read that array, so adding a row or changing its state moves it between tabs and updates the count.

Does Nudge post anything to Slack?

No. Nudge marks the row as nudged on this page, adds one to its reminder count and says so in the status line. Hook your own handler where you post the reminder; the demo never contacts Slack.

Why a reminder count and not reactions?

The integration asks for chat:write and commands, not a scope that reads reactions or replies, so the list shows what Pursefinch itself did: how many reminders it posted. It cannot show who reacted.

How do keyboard and screen reader users work it?

The state tabs are a tab list: arrow keys move between them and the panel follows. Each row is a list item with a heading, the reminder count carries "reminders sent" for screen readers, and every Nudge button names the person and the request. The unseen copies that hold the height are hidden from assistive technology.

What do Approved and Expired rows show?

They show the same row without an action: who approved it and when, or that it expired after 48 hours without a decision. Only waiting rows can be nudged. The times are fixed text typed once, not worked out from the clock.

How does it behave on a phone and in right-to-left layouts?

On a phone the channel, state and reminder count drop under the request and the Nudge button stays at the end of the first line. In a right-to-left layout everything mirrors; names, amounts, channels and counts keep their own direction.