shadcn.io is not affiliated with official shadcn/ui
Shift Planner Calendar Block for React Aria
A café rota of seven staff by seven days where each cell cycles Off, Open, Mid and Close, with warnings for short days, over 40 hours and under 11 hours of rest, and a Publish rota button that waits for them.
Installation
Overview
Build a week's rota and be told what is wrong with it with this shift planner for React with React Aria. A framed window with a plus mark on each corner has a top bar with the title and the one primary action, Publish rota. The grid is a table of seven staff down the side, each with their hours for the week, and Monday 12 to Sunday 18 October 2026 across the top. Each cell is a button that moves through Off, Open (06:00 to 14:00), Mid (10:00 to 18:00) and Close (14:00 to 22:00), drawn as a pattern and named in words. A Cover row counts the people on each day against its minimum and says "Short 1" where it falls under. The warnings below the grid are worked out from the cells: a day below its minimum, a person over 40 hours, and a Close followed by an Open, which leaves eight hours of rest instead of eleven. While any remain, Publish rota is unavailable and says "Fix 2 gaps first"; when the list is empty it ends "Published in this demo; nobody was notified". The arrow keys move between cells, and only the grid scrolls, with the names held at the start. It's built from the Shine Button, Badge and Guides, with a CSS entrance only. For cafés, shops, clinics and any team that plans shifts by the week.
FAQ
How do I set my own staff, shifts and minimums?
Edit PEOPLE, KINDS, MINIMUMS and START_ROTA. Each row of START_ROTA is a person's week as seven letters: - off, o open, m mid and c close. KINDS sets the hours and the times of each, and WEEK_LIMIT and REST_LIMIT set the 40 and 11 hour rules.
How are the warnings worked out?
They are recomputed from the rota after every press. A day is short when the people working are fewer than its minimum, a person is over when their shifts add up to more than WEEK_LIMIT hours, and a rest break is flagged when a Close is followed by an Open the next day. Each warning has a stable id so the list updates in place.
Why can't I press Publish rota?
It stays available to the keyboard so you can ask, but while any warning remains it only says how many gaps to fix. Publishing then changes nothing outside the page, and editing a cell afterward marks the rota as unpublished again.
How do I use it without a mouse?
The grid is a table of buttons with one tab stop. The arrow keys move one cell, Home and End go to the first and last day, and Enter or Space moves the shift on to the next kind. The grid keeps its left-to-right order in right-to-left languages.