shadcn.io is not affiliated with official shadcn/ui
Zap Run History Replay Integration Block for Radix UI
An 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.
Installation
Overview
An integration list section for React with Radix UI, written for Formsill, a fictional intake forms tool for service businesses whose submissions can start a Zap, 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 rows ("7 runs: 5 succeeded, 1 halted, 1 held") beside a polite status line, present from load, that says a replay stays on the page. Then the run history is a real table, rail to rail: the Zap's name and the form that started it, a chain of three dots (filled where a step finished, a ring where it stopped, dashed for the steps never reached) with a caption in words, the state with a glyph, and when it ran. A halted or held run has a ghost Replay that turns the row to Success, says why it stopped before and says it was replayed, and the tally follows. On a narrower screen the chain and the time fold under the Zap's name. Every row keeps its height in every state. It's built from Guides and Button, 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 Zaps, forms and times are example data; nothing is read from or sent to Zapier.
FAQ
How do I change the runs?
RUNS holds every row: the Zap's name, the form, the outcome (success, halted or held), the step it stopped at and why in words, and when it ran as fixed text. The chain, the captions, the state, the tally and the status sentences are all worked out from that array, so adding a run or changing its outcome needs no other edit.
Does Replay send anything to Zapier?
No. Replay marks the run as replayed on this page, turns the row to Success and says so in the status line. Hook your own handler where you hand the submission to the Zap again; the demo never contacts Zapier. Zapier has its own replay for unsuccessful runs in its Zap history, and this block does not call it.
What do Halted and Held mean here?
They follow Zapier's own wording for a Zap run: a halted run was stopped before it finished, and a held run is paused until something it needs, such as a reconnected app account, is fixed. The reason line under each state is example text. Success runs show no reason.
How do keyboard and screen reader users work it?
The table has a caption, column headers and a row header per Zap. The dots are drawn for sighted users and hidden from assistive technology, because the caption beside them ("Stopped at step 2 of 3") says the same. Every Replay button names its Zap. The table scrolls in a focusable region if a column does not fit.
Why does the table never change height?
A replayed row keeps a line for its note, so "Replayed in this demo." takes the place of the reason, and the Replay button leaves an empty slot of the same width. Nothing below a row moves.
How does it behave on a phone and in right-to-left layouts?
On a phone the Steps and When columns fold under the Zap's name and the Replay button shows its icon only, still named for screen readers. In a right-to-left layout the table mirrors; the chain of dots is a drawing and keeps its own order, and times and counts keep their own direction.