shadcn.io is not affiliated with official shadcn/ui
No Schedules Empty State Block for Ark UI
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 Ark 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.