Skip to content
UI Kit
Accent color

Appointments

Booking in steps, services with duration and price, a team with free times, a week view, opening hours with emergency and a confirmation.

6 variants
Switch category

Appointments

Booking in steps

Service, person, day and time, details. The summary grows beside it.

Services

Treatments in groups with duration and price. Pick several, a bar sums them up.

Team with free times

Each person with their skills and the next free times, booked in one tap.

Week view

Free and taken times for a whole week, one day at a time on phones.

Hours and emergency

The week with today and breaks, an emergency card first on phones, closures below.

Confirmation

The booked appointment with a calendar file, change, cancel and what to bring.

Details

What Appointments brings along, read from the registry and the source.

Area
Industries
Variants
6
Version
1.0.0 · since 1.0.0
File
components/ui/appointments.tsx
Brings along
utilskitbuttoniconsectionrevealinput
npm packages
None
Languages
English and German, 59 texts of its own
Studio
Adjust in code
In collections
Medical practice
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The AppointmentsProps interface from components/ui/appointments.tsx, with the comments from the code.

  • variantoptional
    AppointmentsVariant

    stepperservicesteamweekhoursconfirmation

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • servicesoptional
    AppointmentService[]
  • peopleoptional
    AppointmentPerson[]
  • daysoptional
    AppointmentDay[]

    stepper and week: free times per day

  • hoursoptional
    AppointmentHours[]
  • emergencyoptional
    AppointmentEmergency
  • closuresoptional
    { label: string; text: string }[]

    hours: closed days ahead, e.g. [{ label: "24 to 31 Dec", text: "Holidays" }]

  • bookingoptional
    AppointmentBooking
  • mediaoptional
    React.ReactNode

    confirmation: a map or a picture of the place

  • currencyoptional
    string
  • onBookoptional
    (booking: { services: string[]; person?: string; date?: string; time?: string }) => void

Built-in texts

Appointments writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 59 texts
stepsEnglish Service,Person,Date and time,Your detailsGerman Leistung,Person,Tag und Uhrzeit,Deine Daten
stepEnglish Step {n} of {total}German Schritt {n} von {total}
backEnglish BackGerman Zurück
nextEnglish ContinueGerman Weiter
bookEnglish Book appointmentGerman Termin buchen
anyoneEnglish No preferenceGerman Egal wer
anyoneTextEnglish The first free personGerman Die erste freie Person
pickDayEnglish DayGerman Tag
pickTimeEnglish TimeGerman Uhrzeit
noSlotsEnglish Fully bookedGerman Ausgebucht
nameEnglish NameGerman Name
phoneEnglish PhoneGerman Telefon
emailEnglish EmailGerman E-Mail
requiredEnglish Please fill in this field.German Bitte fülle dieses Feld aus.
invalidEmailEnglish Please enter a valid email address.German Bitte gib eine gültige E-Mail-Adresse ein.
summaryEnglish Your appointmentGerman Dein Termin
nothingYetEnglish Nothing chosen yetGerman Noch nichts gewählt
openEnglish OpenGerman Offen
sureEnglish Cancel this appointment? The time goes back to the calendar.German Diesen Termin absagen? Die Zeit geht zurück in den Kalender.
keepEnglish Keep itGerman Behalten
confirmCancelEnglish Yes, cancelGerman Ja, absagen
totalEnglish TotalGerman Gesamt
bookedEnglish See you soonGerman Bis bald
bookedTextEnglish We sent the details to {email}. You can change the appointment up to 24 hours before.German Wir haben die Details an {email} geschickt. Ändern kannst du den Termin bis 24 Stunden vorher.
againEnglish Book anotherGerman Weiteren Termin buchen
fromEnglish fromGerman ab
popularEnglish PopularGerman Beliebt
addEnglish AddGerman Hinzufügen
addedEnglish AddedGerman Gewählt
selectedEnglish {n} selectedGerman {n} gewählt
chooseTimeEnglish Choose a timeGerman Termin wählen
servicesEnglish ServicesGerman Leistungen
nextFreeEnglish Next freeGerman Nächster freier Termin
todayEnglish TodayGerman Heute
tomorrowEnglish TomorrowGerman Morgen
bookAtEnglish Book at {time}German Für {time} buchen
fullEnglish No free timesGerman Keine freien Zeiten
takenEnglish takenGerman belegt
freeEnglish {n} freeGerman {n} frei
weekEnglish WeekGerman Woche
openNowEnglish Open nowGerman Jetzt geöffnet
closedNowEnglish Closed nowGerman Gerade geschlossen
closedEnglish ClosedGerman Geschlossen
pauseEnglish Break {from} to {to}German Pause {from} bis {to}
hoursEnglish Opening hoursGerman Öffnungszeiten
callEnglish Call {phone}German {phone} anrufen
referenceEnglish Booking {ref}German Buchung {ref}
serviceEnglish ServiceGerman Leistung
withEnglish WithGerman Bei
whenEnglish WhenGerman Wann
durationEnglish DurationGerman Dauer
priceEnglish PriceGerman Preis
whereEnglish WhereGerman Wo
addCalendarEnglish Add to calendarGerman Zum Kalender hinzufügen
rescheduleEnglish Change timeGerman Termin verschieben
cancelEnglish Cancel appointmentGerman Termin absagen
cancelledEnglish The appointment is cancelled. We have let the team know.German Der Termin ist abgesagt. Das Team weiß Bescheid.
prepareEnglish Before you comeGerman Bevor du kommst
payOnSiteEnglish Pay on siteGerman Zahlung vor Ort

Accessibility

Read from the source of the component.

  • Appointments handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
  • Sets aria-checked, aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-orientation, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles alertdialog, radio, radiogroup, status, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 9 places in the code switch motion off then.

Frequent questions

How do I install Appointments?

With aiw add @ai-website/appointments. The command puts components/ui/appointments.tsx into your project, the code is yours from then on. It brings along button, icon, section, reveal and input. It needs no further npm packages.

Which variants does Appointments have?

6 variants, Booking in steps, Services, Team with free times, Week view, Hours and emergency and Confirmation. You pick one with the variant prop, for example variant="services".

Can I translate the texts of Appointments?

Yes. Appointments carries 59 texts of its own in English and German, such as “Service,Person,Date and time,Your details”, “Back” and “Continue”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Appointments?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Appointments with aiw_components and install it with aiw_add @ai-website/appointments. Name the variant in your prompt, for example variant="stepper", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Appointments on a page.

Often searched

Jump to

Copied to the clipboard