shadcn.io is not affiliated with official shadcn/ui
On-Call Handoff Changelog Block for Ark UI
A pager handoff note as a split: two responders and a band of three counts at the start, a checklist of what is still open at the end that the incoming person ticks, and a Shine Button that unlocks when every box is ticked.
Installation
Overview
An on-call handoff for React with Ark UI, written for Relayshift, a fictional on-call scheduling tool. A split with a divider that runs from the top rule to the block's end. At the start: the title and one sentence, the two responders (the one going off shift, an arrow, the one coming on, as initials in avatars with their names), the handoff time, and across the foot a band of three counts (handled, resolved, open). At the end: the checklist "Open for the next shift", four real checkboxes the incoming person ticks, a count and a bar that follow ("2 of 4 acknowledged"), and the Shine Button "Take over the pager", which is disabled until every box is ticked. Pressing it shows what a real handoff would say, marked as this demo's result, with an Undo; a disclosure lists what was resolved this shift. Nothing is sent or saved: the ticks live in the page's memory. On a phone the title comes first and the checklist sits under the counts. It's built from Guides, Avatar, Checkbox, Progress, Collapsible, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For on-call tools, runbooks and ops handbooks. The people and the items are example data.
FAQ
How do I change the items and the people?
Edit OPEN_ITEMS, RESOLVED and HANDOFF at the top of the file. An open item is an id, a title and a detail; a resolved one is an id and a title. The "Handled" count is the resolved items plus the open ones, so the band always adds up, and the "2 of 4 acknowledged" line, the bar and the unlock all follow the length of OPEN_ITEMS. The responders' names and initials are written in the markup. The handoff day is a fixed ISO date, never computed from today.
Why is the button disabled, and how is that announced?
Taking over the pager is only possible once every open item is acknowledged, so the Shine Button is disabled until then and a line under it says what is missing. The count above the list is a polite live region, so a screen reader hears "2 of 4 acknowledged" as boxes are ticked. Each box is named by its item's title and described by its detail.
What does pressing Take over the pager do?
Nothing leaves the page. The button is replaced by a line that says Mateo Silva has the pager "in this demo", and focus moves to it so it is read out. Undo puts the button back, with focus on it. Wire take to your scheduling API to make it real; the ticks are plain state.
How does the resolved list behave?
It is a disclosure, closed on load, that opens a list of what was closed during the shift. While it is closed its content is inert, so Tab skips it. The content stays in the page while it is closed, inert and hidden.
How does it fit on a phone and in a right-to-left layout?
Below lg the halves stack: the title and the responders first, then the three counts in a band, then a rule and the checklist. The responders wrap onto two lines when they must, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the split, the arrow and the checkboxes mirror, and times and counts stay in reading order.