shadcn.io is not affiliated with official shadcn/ui
No Availability Empty State Block for React
A 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.
Installation
Overview
Turn "nobody can book you" into a week you can fill in, with this no availability empty state for React with Base UI. A header sits over one framed panel for Timeslate, a booking page. The panel's first cell holds two native selects (opens at, closes at) and the sums they make; its second is the week drawn as seven columns on shared hairlines, each a real checkbox for that day with a track from 06:00 to 22:00. Every column begins with a dashed block, the hours it could open; ticking a day turns the block solid, and the count in the heading, the days open and the week's hours follow from the ticks and the selects. The action foot closes the frame with the Shine Button, the only colored control: Open these hours fills the blocks in and then reads Update hours. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the first hours of any booking, shift or appointment page.
FAQ
What happens when I press Open these hours, and what stays in the page?
The ticked days and the range go into the page's state: the blocks turn solid, the heading changes from "No hours open yet" to "Your hours are open", and the button reads Update hours. Nothing is saved, published or sent: reload and the week is empty again, and Start over empties it without a reload. To wire it for real, send the days and the two times to your API where the code says so, and keep the saved hours as the starting state.
Where do the hours come from?
They are worked out, never typed. Each ticked day is open for the same range, so a day is the closing time minus the opening time, and a week is that times the number of ticked days: 5 days from 09:00 to 17:00 is 8 hours a day and 40 hours a week. Ranges run in half hours, so you can see 37.5 hours.
What if I set the closing time before the opening time?
The other select moves with you and the status line says so: pick an opening time at or after the closing time and the closing time moves an hour later (or to 22:00); pick a closing time at or before the opening time and the opening time moves an hour earlier (or to 06:00). The strip always shows a range with some length.
How is this different from a working-hours settings page?
A settings page edits hours that already exist, day by day. This is the empty state: nothing is open, so there is one range to set and a week to tick, and the first press creates the hours. Once they exist, per-day ranges, time zones and breaks are what a settings page adds.
Is it usable with a keyboard and a screen reader?
Each day column is a native checkbox named for its day ("Monday"), so Tab walks the week and Space ticks a day. The two selects are labelled Opens at and Closes at. The drawn blocks and the hours under each column are hidden from assistive technology; the sums are also in the list beside the strip, and the foot's polite status line says what changed ("Not applied: 40 hours a week."). Open these hours with no day ticked says so and puts focus on the first day.
How does it look on a phone, and in a right-to-left page?
The strip stacks under the selects, and the foot with the button stays pinned to the bottom of the screen. The strip is drawn left to right in any language, because it is a time axis; the heading, labels and status line follow the page's direction.
Related
- Pro
Timezone and Calendar Settings
Appearance and localeA working hours settings panel: seven bars, one per day, with start and end selects and an Open switch, a week start that turns the rows, a Copy Monday to weekdays button, and a time zone pair that turns the first open day into both zones.
- Pro
No Schedules Empty State
Calendar and timeA 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.
- 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
Mentor Availability Profile
Schedules and bookingA mentor profile that books across time zones: slots set once in UTC, a zone menu, a month grid marking the days with times, times that roll into the next day where they must, and session types with prices.
- Pro
No Time Entries Empty State
Projects and tasksA timesheet with nothing logged yet: a form for the day, project, hours, minutes and a note, a drawing of five isometric day bars that rise as time is logged, and a table that fills in with one Log time button.
- Pro
No Meetings Empty State
Calendar and timeA meeting scheduler with nothing booked: a New meeting popover drawn open over a week, holding a day timetable where you pick a free hour, name the meeting and choose 15, 30 or 60 minutes, then paint it on the day.