shadcn.io is not affiliated with official shadcn/ui
No Schedules Empty State Block for React
A shift planner with no schedules yet: a segment group for Daily, Weekly or Monthly, weekday chips, the next four dates worked out from a fixed today, a loop drawing that closes, and one Create schedule button.
Installation
Overview
Let people build the repeat and see where it lands, with this no schedules empty state for React with Base UI. A header sits over one framed panel for Shiftwick, a shift planner. The panel's first cell builds the schedule: an Input for the shift's name, a segment group for Daily, Weekly or Monthly, and the one extra control each kind needs, weekday chips (toggle group) for Weekly or a day of the month for Monthly. Its second cell draws the loop of a repeating shift, an outline with two arrowheads and a dashed gap, over the next four dates the repeat gives. The action foot closes the frame with the Shine Button, the only colored control: Create schedule closes the loop, turns the heading from "No schedules yet" to the shift's name and then reads Update schedule. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the first shift, rota, class or maintenance schedule of any planner.
FAQ
What happens when I press Create schedule, and what stays in the page?
The name and the repeat go into the page's state: the dashed gap in the loop turns solid, the heading becomes "Opening shift is scheduled" (or whatever you named it), the count reads "1 schedule" and the button reads Update schedule. Nothing is saved or sent: reload and the panel is back to empty, and Start over resets it without a reload. To wire it for real, send the name and the rule to your API where the code says so, and start the panel from the saved schedule.
Where do the next four dates come from?
They are worked out from the repeat and the page's fixed "today", Friday 9 October 2026, with UTC date arithmetic, never the clock. Weekly on Monday and Wednesday gives Mon 12 Oct, Wed 14 Oct, Mon 19 Oct and Wed 21 Oct; Monthly on the 12th skips to the next month each time; Daily starts tomorrow. In your app, count from the visitor's own date.
Why can't I turn every weekday off?
A weekly schedule with no day never happens, so the last chip refuses to switch off and the status line says to keep at least one day on. Switch to Daily or Monthly if you want a different shape.
Why does the panel keep its height when I change the kind?
The controls for Daily, Weekly and Monthly are all in the page at once, stacked in one place: the unused two are invisible and cannot be reached with the keyboard, so the cell is always as tall as the tallest. Choosing a kind never moves the loop, the dates or the foot.
Is it usable with a keyboard and a screen reader?
Tab walks the name, the three kinds (arrow keys move between them), the weekday chips, the day select and the foot's buttons. Each chip is named with its full day ("Monday") and says whether it is pressed. The loop and the numbering beside the dates are hidden from assistive technology; the dates are a real list with machine-readable times, and a polite status line says what changed ("Not created: weekly, 3 days a week."). Create schedule with an empty name says so and focuses the name.
How does it look on a phone?
The dates and the loop stack under the controls, the chips wrap onto a second row where they must, and the foot with Create schedule stays pinned to the bottom of the screen. The loop is drawn the same way in any language; the labels and the dates follow the page's direction.
Related
- Pro
No Availability Empty State
Calendar and timeA booking page with no open hours yet: a week drawn as seven day columns you tick, two selects for the opening and closing time, sums worked out from them, and one Open these hours button.
- Pro
No Events Empty State
Calendar and timeA calendar window with no events yet: a rail of calendars, October 2026 as a month grid where you pick a day, a form that takes its title and start, and an agenda with a pushpin that fills in.
- Pro
No Reminders Empty State
Calendar and timeA reminders app with nothing set: a Remind me popover drawn open over a note with three empty slots, an hourglass whose sand has not fallen, a field and three presets that write a day and time, and one Set reminder button.
- Pro
Backup Schedule Settings
Backups and exportsA backup schedule panel that leads with what the schedule amounts to (the next run, how much history the copies cover, how much space they take), with frequency, time, retention and destination controls beside a list of the next five runs.
- Pro
Recurring Payment Dialog
Payments and plansA rent page with its autopay dialog shown open: an amount, how often, a start day from a folded inline calendar, when it ends, and the next four payment dates worked out under the fields.
- Pro
No Sprints Empty State
Projects and tasksAn agile planner with no sprint yet: a slider for one to four weeks, a start day and a capacity, an end date worked out from them, a footbridge drawing with a span for each week, and one Start sprint button.