shadcn.io is not affiliated with official shadcn/ui
Channel Setup Onboarding Block for React
A setup panel with an ordered escalation chain of Slack, Email, SMS and Phone call, with moves, removal with Undo, a checked wait in minutes on each later step and a drawn timeline that rebuilds from the order.
Installation
Overview
Let a new user decide who gets woken and in what order, with this chain for React with Base UI. It is a setup panel of Pigeonwick, an on-call alert router, in bands ruled by Guides. The first band is an ordered list of steps, each with a two-letter tile for its channel (Slack, Email, SMS or Phone call), one sentence, Move up, Move down and Remove, and on every step after the first an “If no one acknowledges in” Number Input with a unit. Remove keeps the step so Undo, in the next band, puts it back where it was; the channel that is not in the chain is added from there. The last band is a drawn timeline with one node for each step at its minute, and a sentence the order and the waits rewrite (“Escalates twice, the last time at 25 minutes”). Save chain is the one Shine Button, quiet until something changed, with Discard beside it.
FAQ
What counts as a valid wait?
A whole number of minutes from 1 to 60, checked in the block (the number field itself sets no limits, so a typed value is never changed under you). A wrong value is explained in a line that is always reserved under the field, the timeline keeps using ten minutes for that step until it is fixed, and Save chain refuses and focuses the first wrong field. Arabic-Indic digits typed on a right-to-left page are read as ordinary digits. The timeline moves as you type.
How do I change the order with the keyboard?
Each step has Move up and Move down buttons named for its channel (“Move Email up”). The row moves, the status says where it went, and focus stays on the button you pressed, or on the other one when the pressed one is now at an end and cannot act. The first step has no wait: a step that moves to the top is notified right away, and keeps the wait it had if it moves down again.
What do Remove and Undo do?
Remove takes a step out, says so, and moves focus to Undo remove. Undo puts the same step back at its old place with the wait it had. A chain always keeps one step; removing the last one says so and changes nothing. Adding a channel clears what Undo holds, so it can never bring back a stale step.
How is the timeline built?
From the order and the waits, as a pure function: the first step fires at minute 0 and each later step fires after the waits before it, so 10 and 15 minutes give 0, 10 and 25. The nodes are equally spaced so the names never collide; the minute is written under each. The sentence under it is derived the same way.