shadcn.io is not affiliated with official shadcn/ui
On-Call Handoff Changelog Block for React
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 Base 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.
Related
- Pro
Post-Mortem Changelog
Incidents and uptimeA blameless post-mortem as one framed report: three impact cells, a five-whys accordion from the symptom to the root cause, and an action-items table with owners, due days and states beside a progress bar.
- Pro
Incident Timeline Changelog
Incidents and uptimeOne incident as a split: a summary at the start and its four updates on a hairline at the end, each with a stage badge, a time in UTC, an elapsed chip counted from the first update and one sentence.
- Pro
Incident Severity Changelog
Incidents and uptimeAn incident log grouped under P0 to P4 headings, with a toggle group that filters it, a band of five median-time-to-resolve cells and rows of id, title, users affected and state, each severity a shape and a word.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Steps Chain Release Approval Flow
Deploys and rolloutsA release sign-off split: a summary of the release at the start, and a vertical approval chain at the end with people, states and times, an Approve button that advances it in the demo, a progress bar and a Deploy button that gives a stated demo result.
- Pro
Phase Stepper Onboarding Team
Hiring and onboardingThe first three months at an HR onboarding company as a stepper by phase (Day 1, Week 1, Month 1, Month 3), each phase with four checkable tasks, a progress bar and the mentor assigned to it.