shadcn.io is not affiliated with official shadcn/ui
Triggers And Actions Grid Integration Block for React
An integration grid section for a form tool working with Zapier: a derived tally and status line, then a split with the three triggers at the start and the three actions at the end, each a checkbox cell in shared hairlines.
Installation
Overview
An integration grid section for React with Base UI, written for Formsill, a fictional intake-form tool for service businesses, and its Zapier connection. A compact header carries the mark pair at its end. Under a band rule, a tally is worked out from the choices ("2 triggers and 1 action on") beside a polite status line that is in the page from load. Then a split behind a divider holds two groups: at the start the three triggers Formsill offers in Zapier, labelled "When this happens", and at the end the three actions, labelled "Do this". Each is a checkbox cell in shared hairlines with a title and one line about what it does, a ticked cell takes a solid muted tint, and each group counts its own ("2 of 3 on"). On a phone the groups stack and the divider turns into a rule. Ticking a cell changes this page only. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides and Checkbox with your theme's tokens for every colour. Zapier is named in text only: no Zapier logo, colour or wordmark ships with the block. The triggers and actions are example data.
FAQ
Are triggers and actions Zapier's terms?
Yes: in Zapier a trigger is the event that starts a Zap and an action is a step the Zap runs afterwards. Which ones Formsill really offers is for your own app to say. Edit TRIGGERS and ACTIONS at the top of the file: an id, a title, a line and whether it starts on.
Where does the tally come from?
From the ticks, with each count run through a singular and plural helper: it never says "1 triggers". Each group's "2 of 3 on" and the status line, which names the cell you changed, come from the same state.
What stays local?
Everything: ticking is page state, and the status line says that nothing is sent to Zapier from load. Wire the ticks to your own settings where the demo changes state.
How do keyboard and screen reader users work it?
Each group is a labelled list ("Triggers", "Actions") of whole-cell labels, so clicking anywhere in a cell toggles it. Each checkbox is named by its title and described by its line, and the focus ring shows on the box. The status line is a polite live region.
Does it differ between the seven targets?
Only in how each library reports a checkbox change; the markup, the copy and the behaviour are the same everywhere.
How does it behave on a phone and in right-to-left layouts?
On a phone the two groups stack, with a rule between them where the divider was. In a right-to-left layout the groups swap sides and the checkboxes sit at the end; the counts sit in their own isolates. The header fades up once on load, and reduced motion turns that off.
Related
- Pro
Zap Recipe Detail Integration
With a product drawingAn integration detail section for a form tool connecting to Zapier: a header with the mark pair and a Connect Zapier Shine Button, a three-cell Zap recipe with chevrons on the joins, what it sends and reads, and three steps.
- Pro
Catch Hook Setup Integration
Keys and codeAn integration setup section for a form tool working with Zapier: three numbered steps (a copyable Catch Hook address, a sample submission, a field check), a Finish setup Shine Button, and a framed JSON tree of the sample, shown first on wide screens.
- Pro
Zap Run History Replay Integration
Synced tablesAn integration list section for an intake forms tool connected to Zapier: a table of Zap runs with a chain of three dots for the steps, a state in words and a Replay on halted or held runs, and a tally worked out from the rows.
- Pro
Segment Grid Integration
Switch and tick gridsAn integration grid section for a tracking-plan checker working with Segment: a table of six tracked events by four destinations with a named checkbox in every cell, a count in each column header and a derived tally of routes.
- Pro
Retry Schedule Cards Integration
Cards and previewsAn integration grid section for a failed-payment recovery tool connecting to Stripe: three radio cards in shared hairlines, each drawing its retry schedule on a 14-day line, with a check and an inset rule on the chosen one.
- 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.