Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Approvals by State Tabs Integration Block for React

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration list 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, 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.

  • Pro

    Slack Detail Integration

    Scopes and steps

    An 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

    Message Layouts Grid Integration

    Cards and previews

    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.

  • Pro

    Invite the App Setup Integration

    Choose and verify

    An 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

    Unmatched Variants List Integration

    Synced tables

    An integration list section for a stock sync tool connected to Shopify: seven variants waiting for a match as rail-to-rail rows, each with a Select to pick one of your items, a Skip button and a state, under a progress bar and a count worked out from the rows.

  • Pro

    Sentry List Integration

    Grouped and triaged

    An 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

    Integration Log Changelog

    APIs and integrations

    Five connector changes as rows that run rail to rail and end the block, each with a neutral lettermark plate, a state badge, a day and a scopes popover listing what the connector reads and writes.

All 100 integration blocks