shadcn.io is not affiliated with official shadcn/ui
Verification Call Booking Account Block for Vue
Book a 20 minute verification call for one fixed week: seven day tiles, six times with taken ones struck through, a booking summary with one confirm button, then Reschedule, Cancel and a Past calls disclosure.
Installation
Overview
Let people book the human check that runs when an automatic identity check fails, with this booking panel for Vue with Ark UI. At the start, one fixed week as seven day tiles, the weekend closed and a fully booked day shown as such, and under them the day's six times as chips, some already taken and struck through. Both groups are native radios, so arrow keys walk them and the choice is announced as a radio group. At the end, Your booking lists the day, the time, the length and where, and its Shine Button confirms. Once booked, the same cell becomes a card with Reschedule, which frees the slot, and Cancel call, and a Past calls disclosure lists the two earlier ones. Pressing Confirm before a day and a time are chosen answers in the status line and moves focus to what is missing. The two states share one cell, so the panel keeps its height, and the status line says nothing is booked anywhere. It's built from Shine Button, Button and Guides, with native radios and a CSS entrance only. For account pages, support flows and any app that offers a scheduled check.
FAQ
How do I change the week and the times?
Edit DAYS (seven ISO days, Monday first), TIMES (the day's chips, in the time zone you name in the sentence over the panel), LENGTH and TAKEN, which lists the times other people hold, by day. Closed days are worked out from the weekday of each ISO day, free times are TIMES less the taken ones, and a day with none left is disabled and read out as fully booked. AS_OF is the only "now".
What stays local, and how do I make booking real?
Everything: Confirm booking sets this page's state and the status line says nothing was sent; Reschedule and Cancel call just change it back. To make it real, read the free times from your scheduling service when a day is chosen, hold the slot with a request in confirm, and show a refusal (someone took it a moment ago) in the same status line. Free the slot on your server in reschedule and cancel.
Why is the week a strip and not a month calendar?
Only one week can be booked, so a month grid would be mostly greyed out. Seven tiles show the whole choice at once, work with arrow keys, and fit a phone without a popover. If you need a longer window, replace the strip with the Calendar and keep the time chips.
Does the panel move between choosing and booked?
No. Your booking and the booked card sit in one grid cell and the other is unseen, so switching never changes the height. While a call is booked the day and time groups are disabled and the chosen ones stay highlighted, so what you booked stays visible.
How does it look on a phone?
The day tiles, the times, then Your booking stack in that order, each tile staying tappable at 320 pixels wide. The foot with the status line is pinned to the bottom of the screen, so a confirmation or a refusal is always in view.
Is it accessible?
Days and times are native radio groups with a legend, a taken time says so in text and a closed day says closed, and the dates are written out. Reschedule, Cancel call and Confirm booking are real buttons and the status line is a polite live region present from the start. Focus moves to Reschedule after booking, to the first free time after rescheduling and to the first open day after cancelling.