shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Book a visit from one card with this appointment product card for Vue with Ark UI. A start cell holds a drawn clinic mark, a "Provider" Toggle Group of three physios (initials, name and specialty) and a "Day" Toggle Group for Mon 12 to Fri 16 Oct. An end cell lists the day's eight times as a third Toggle Group: a time someone else has taken is disabled and says "Booked", your own says "Yours", and the line under the group names what you have. The one Shine Button books the pressed time, "Booked 10:30 with Ines R.", and a ghost Button cancels it and gives the time back. Switching physio or day moves the pressed time to the first one that is free, so a taken time is never pressed. A polite status line says what changed and nothing is stored, charged or sent. For clinics, salons, tutors and anyone who sells time in slots.
FAQ
How do I change who is free and when?
Edit TAKEN, a list of physio|day|time lines, and TIMES, PHYSIOS and DAYS. A time is disabled when its line is in TAKEN for the pressed physio and day. In a real clinic, read the same three values from your calendar and send the pressed physio, day and time to your booking call.
Why are the days fixed to one week?
The days are typed (Mon 12 to Fri 16 Oct) and counted from a fixed "today" (AS_OF), so the card looks the same on every load and on the server. Generate them from the visitor's date on the server in a real shop.
What stays local, and how do I wire it for real?
The pressed physio, day and time, the booking and the status line are page state; nothing is stored, charged or sent. Replace the body of book and cancel with calls to your booking service, and have it answer with the slot it actually took in case someone else was faster.
Can two people book the same time?
Not in this demo, because only one booking exists and it is yours. In a real service the server must decide: ask it to take the slot, and show "Booked" when it says no.
How does it look on a phone?
The two cells stack, the physios first, then the days, then the times in two columns. The Shine button sits under them across the full width.
Is it accessible?
Each group is named by a visible label, every time says Free, Booked or Yours in words as well as by its style, a taken time is a disabled control, and a time is announced with its state. Booking and cancelling are announced by the status line, and Cancel returns focus to the Book button.
