shadcn.io is not affiliated with official shadcn/ui
Split Panel Stepper Block for React Aria
An alert-routing setup with four ruled step rows that summarise their own switches, the chosen step's settings beside them, and a reviewed tick that Apply waits for.
Installation
Overview
Let people review a set of settings one group at a time with this master-detail stepper for React with React Aria. A hairline frame with plus marks puts a list of four ruled rows at the start (Channels, Quiet hours, Escalation and Digest) and the chosen group's settings at the end. Each row is a Steps trigger that prints a summary worked out from its switches ("2 of 4 channels on") and a mark once the group is reviewed. The settings are Switch rows with a hint, and a Checkbox marks the group reviewed. Groups open in any order; the foot counts "2 of 4 reviewed" and Apply, the block's one Shine Button, asks for the rest first and then says it applied in this demo. Changing a switch after applying clears the applied message. On a phone the rows scroll sideways with the settings under them. For notification rules, deploy checks, permissions and other settings with several parts.
FAQ
Why can the steps be opened in any order?
Nothing in the settings depends on an earlier group, so the rows are all reachable and the progress is the reviewed tick rather than a position. If your groups do depend on each other, disable the later triggers until the earlier ones are reviewed.
Where do the summaries come from?
Each is derived from the switches of its group (summaryOf) and the group's noun in GROUPS, so adding a rule to RULES updates the count and the row at once. Nothing is typed twice.
What stays local, and how do I wire it for real?
The switches, ticks and the applied message are component state and are lost on reload. Apply only shows "Applied in this demo". To make it real, post the on list in the apply handler and load the saved list into the initial state.
How does the keyboard work?
The list is one tab stop on the open row; arrow keys move between rows and Enter or Space opens one. Tab continues into the settings, where Space flips a switch and ticks the reviewed box.