shadcn.io is not affiliated with official shadcn/ui
On-Call Schedule Dashboard Block for Radix UI
A week of on-call shifts as one lane per engineer with a bar for each shift, the escalation chain for today and two swap requests whose Approve moves the bars between lanes.
Installation
Overview
See who is on call and settle the swaps waiting for you, with this on-call schedule panel for React with Radix UI. A hairline frame with a plus mark on each corner opens with the week of 19 October as lanes: one per engineer, each shift a bar across its days with its tier (primary bars solid, secondary bars outlined) and a day ruler above. The engineer on call now is marked with a dot on the bar and the words "On call now" under their name. Two bands follow. The first is today's escalation chain, worked out from who holds each tier: who is paged first, who after 10 minutes and the manager after 20, with the method for each. The second lists the swap requests with the reason for each; Approve trades the two shifts between the two engineers, so their bars move lanes, and Decline leaves everything as it was. The first request's Approve is a Shine Button. It's built from Avatar, Button, Shine Button and Guides, with the lanes in CSS grid. For on-call rotations and engineering handbooks.
FAQ
How do I fill it with my rotation?
Edit ENGINEERS, SHIFTS and SWAPS. A shift has a tier, the first day it covers (Monday is 0), how many days it spans and who holds it. A swap names the asker, the other engineer and the two shifts they trade. The week starts on WEEK_START and "today" is the day index TODAY; the lanes, the chain and the sentence above are all worked out from those.
What does Approve do?
It exchanges the owners of the two shifts, so the bars leave one lane and appear in the other, the chain is recalculated, and the request shows "Swapped in this demo" in place of its buttons. Decline leaves the lanes alone and shows "Declined in this demo". After either, focus moves to the next request's Approve, or to the Swap requests heading when none is left.
What stays local, and how do I wire it for real?
All of it: nobody is told and nothing is stored. To make it real, load the shifts from your scheduling service, send Approve and Decline to it and update the lanes from its answer, then notify the two engineers. Check for overlaps on the server too, since a swap can leave one engineer with two shifts on the same day.
Is it accessible?
Each lane is a named list whose items read like "Primary, Wed 21 to Thu 22, on call now", so the schedule is complete without seeing the bars. The day ruler is decorative. The buttons on a request say whose swap they act on. The one polite status region says what a swap did.