shadcn.io is not affiliated with official shadcn/ui
No Meetings Empty State Block for React
A 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.
Installation
Overview
Open a meeting scheduler on an empty week and let the first booking paint itself, with this no meetings empty state for React with Base UI. A header holds the real New meeting button for Meetwick, a meeting scheduler. Under it a stage draws the week of 12 to 16 October 2026 as five columns on hour lines, and drawn open in place beside a twin of that button is the scheduler's popover card: Monday as a day timetable from 09:00 to 17:00, one row per hour, with lunch and focus time hatched and closed and every other hour a free slot you pick. A title Input, a toggle group for 15, 30 or 60 minutes and the Shine Button, the only colored control, finish it: Schedule paints the meeting on the timetable with its title, its length and a bar for how much of the hour it takes, and on the week behind the card. The frame's corners come from Guides, and the whole block uses CSS transitions only. Shown open in place for the preview; in your app keep the Popover and drop the in-place copy.
FAQ
What happens when I press Schedule, and what stays in the page?
The meeting goes into the page's state: its hour turns from a free slot into a booked row on the timetable and a block on the week behind, the form clears and the status line says what was booked ("Scheduled Design review on Mon 12 Oct at 09:00 for 30 minutes. Nothing was sent."). Nothing is saved or sent: reload and the week is empty again, and Start over clears it without a reload. To wire it for real, send the meeting to your calendar API where the code says so and re-read the day's free slots from the response.
Why hours, and which ones are free?
Each row of the timetable is one hour, and a slot starts on it. Lunch (12:00) and focus time (15:00) are typed as closed, so the six other hours are free; once booked an hour is taken. The length (15, 30 or 60 minutes) decides how much of the hour the meeting fills, which is what the small bar on the booked row and the block on the week show. The day is the next working day after the page's fixed "today" (Friday 9 October), so it is Monday 12 October.
What part is the preview's, and what is real?
On load the card is drawn in place on the stage so the page does not trap or move focus. The New meeting button opens the real, non-modal Popover (Escape closes it and focus goes back to the button) and the in-place copy stays closed until a reload. Both share one form and the page's state, so what you picked in place is there in the real card. In your app keep the Popover and delete the in-place copy.
Is it usable with a keyboard and a screen reader?
Tab walks the free slots (each named "09:00 to 10:00, free" and pressed when picked), the title, the length group and Schedule. Schedule with no hour picked says so and moves focus to the first free slot; with no title it moves focus to the title. The week behind is drawn, hidden from assistive technology, and the polite status line carries every change.
Related
- Pro
Schedule Meeting Dialog
Time and schedulingA month page with its new event dialog shown open: a title, a day from a folded calendar, a start time and length, guest emails as tags, and a day timeline that moves with the time and warns when the meeting clashes.
- 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
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 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 Feedback Empty State
Social and feedbackA feedback widget's popover shown open in place on a drawn settings page: five drawn faces from flat to curved as radio buttons, bars that are all zero, a follow-up field and a Send feedback button that grows one bar.
- 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.