Medical practice

For doctors, clinics and therapy practices. Services by area and who pays, the team, consultation hours on a time axis, insurance and online booking.

5 variants

Switch category

Services

Areas on the side, a gliding filter for covered and self-pay services, prices where the patient pays.

Open in Studio

Installv1.0.0

aiw add @ai-website/medical-practice

Brings along utils, kit, button, icon, input, reveal, section, motion

Usage

<MedicalPractice variant="services" services={[{ id, group, title, coverage: "statutory", price, duration }]} />

Source

Doctors

A directory with one profile at a time, languages, focus, career and booking. On phones every doctor is a card that opens.

Open in Studio

Installv1.0.0

aiw add @ai-website/medical-practice

Brings along utils, kit, button, icon, input, reveal, section, motion

Usage

<MedicalPractice variant="doctors" doctors={[{ name, specialty, image, languages, focus, bio, career, days, bookHref }]} />

Source

Consultation hours

The week on a time axis by kind of consultation, bars grow in when scrolled to, a live line marks now. Filter a kind with one tap.

Open in Studio

Installv1.0.0

aiw add @ai-website/medical-practice

Brings along utils, kit, button, icon, input, reveal, section, motion

Usage

<MedicalPractice variant="consultation-hours" kinds={[{ id, label, description }]} hours={[{ day: 0, kind, from: "07:30", to: "09:30" }]} notices={[…]} />

Source

Insurance and costs

Public, private or self-pay with a gliding switch. What to bring ticks itself off, the self-pay prices rise in next to it.

Open in Studio

Installv1.0.0

aiw add @ai-website/medical-practice

Brings along utils, kit, button, icon, input, reveal, section, motion

Usage

<MedicalPractice variant="insurance" insuranceTypes={[{ id, label, summary, bring, billing }]} services={[…]} />

Source

Online booking

Reason, new or existing patient, insurance, a free time by doctor and the details. Each step slides in, a summary and the emergency number stay beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/medical-practice

Brings along utils, kit, button, icon, input, reveal, section, motion

Usage

<MedicalPractice variant="online-booking" reasons={[{ id, label, icon, duration, note }]} insuranceTypes={[…]} slots={[{ date: "2026-10-26", slots: [{ time, doctor }] }]} onBook={(d) => …} />

Source

Details

What Medical practice brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/medical-practice.tsx
Brings along: utilskitbutton icon inputrevealsectionmotion
npm packages: None
Languages: English and German, 67 texts of its own
Studio: All 5 variants editable
In collections: Medical practice
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The MedicalPracticeProps interface from components/ui/medical-practice.tsx, with the comments from the code.

variantoptional
MedicalPracticeVariant
servicesdoctorsconsultation-hoursinsuranceonline-booking
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
servicesoptional
MedicalService[]
services, insurance: the services, self-pay ones with price
doctorsoptional
MedicalDoctor[]
hoursoptional
MedicalHours[]
consultation-hours
kindsoptional
MedicalHourKind[]
noticesoptional
{ icon?: IconName; title: string; text: string }[]
consultation-hours: emergency numbers and closures, one line each
nowoptional
{ day: number; time: string }
consultation-hours: the time to measure against. Defaults to the browser clock.
insuranceTypesoptional
MedicalInsuranceType[]
insurance
helpoptional
{ title: string; text: string; action?: { label: string; href: string; icon?: IconName } }
services, insurance: a question card with one way to ask it
reasonsoptional
MedicalReason[]
online-booking
slotsoptional
MedicalSlotDay[]
currencyoptional
string
onBookoptional
(data: Record<string, string>) => void

Built-in texts

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

Show all 67 texts

Key	English	German
all	English All	German Alle
to	English to	German bis
statutory	English Covered by insurance	German Kassenleistung
selfPay	English Self-pay	German Selbstzahler
filter	English Show services	German Leistungen zeigen
groups	English Areas	German Bereiche
min	English about {n} min	German ca. {n} Min.
noServices	English No services in this area for this filter.	German Für diesen Filter gibt es in diesem Bereich keine Leistungen.
languages	English Languages	German Sprachen
focus	English Focus	German Schwerpunkte
career	English Career	German Werdegang
inPractice	English In the practice	German In der Praxis
bookWith	English Book with {name}	German Termin bei {name}
team	English Doctors	German Ärztinnen und Ärzte
days	English Mon,Tue,Wed,Thu,Fri,Sat,Sun	German Mo,Di,Mi,Do,Fr,Sa,So
daysLong	English Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday	German Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
openNow	English Open now	German Jetzt geöffnet
until	English {kind} until {time}	German {kind} bis {time} Uhr
closedNow	English Closed right now	German Gerade geschlossen
opensAt	English Opens {day} at {time}	German Wieder geöffnet {day} ab {time} Uhr
today	English Today	German Heute
closed	English Closed	German Geschlossen
kinds	English Kind of consultation	German Art der Sprechstunde
hoursTable	English Consultation hours by day	German Sprechzeiten nach Tagen
emergency	English Outside these hours	German Außerhalb der Sprechzeiten
insurance	English Insurance	German Versicherung
bring	English Please bring	German Bitte mitbringen
billing	English How we bill	German So rechnen wir ab
prices	English Self-pay services	German Selbstzahlerleistungen
from	English from	German ab
step	English Step {n} of {total}	German Schritt {n} von {total}
stepReason	English Reason	German Anlass
stepPatient	English About you	German Zu Ihnen
stepTime	English Time	German Uhrzeit
stepDetails	English Details	German Angaben
reasonQ	English Why would you like to come?	German Weshalb möchten Sie kommen?
patientQ	English Have you been here before?	German Waren Sie schon einmal bei uns?
existing	English Yes, I am a patient	German Ja, ich bin Patient
newPatient	English No, my first visit	German Nein, zum ersten Mal
insuranceQ	English How are you insured?	German Wie sind Sie versichert?
timeQ	English Pick a time	German Uhrzeit wählen
anyDoctor	English Any doctor	German Alle Ärzte
noSlots	English No free times on this day. Please pick another day.	German An diesem Tag ist nichts mehr frei. Bitte wählen Sie einen anderen Tag.
name	English Full name	German Vor- und Nachname
birth	English Date of birth	German Geburtsdatum
phone	English Phone	German Telefon
email	English Email	German E-Mail
optional	English optional	German optional
required	English Please fill in this field.	German Bitte füllen Sie dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte geben Sie eine gültige E-Mail-Adresse ein.
back	English Back	German Zurück
next	English Continue	German Weiter
book	English Book appointment	German Termin verbindlich buchen
booked	English Your appointment is booked	German Ihr Termin ist gebucht
bookedText	English We have sent the confirmation to you. Please come five minutes early and bring your insurance card.	German Die Bestätigung ist unterwegs zu Ihnen. Bitte kommen Sie fünf Minuten früher und bringen Sie Ihre Versichertenkarte mit.
again	English Book another appointment	German Weiteren Termin buchen
calendar	English Add to calendar	German In den Kalender
summary	English Your appointment	German Ihr Termin
nothing	English Nothing picked yet	German Noch nichts gewählt
acute	English In an emergency call 112	German Im Notfall die 112 wählen
noAppointment	English No appointment needed	German Ohne Termin möglich
notThisDay	English Not on this day	German An diesem Tag nicht
newShort	English New patient	German Neu in der Praxis
existingShort	English Existing patient	German Bereits Patient
acuteText	English Chest pain, shortness of breath or signs of a stroke never wait for an appointment.	German Brustschmerz, Atemnot oder Zeichen eines Schlaganfalls warten nie auf einen Termin.
newHint	English First visit, please plan 15 minutes for the questionnaire.	German Erster Besuch, bitte planen Sie 15 Minuten für den Anamnesebogen ein.
with	English with {name}	German bei {name}

Read from the source of the component.

Medical practice handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-controls, aria-current, aria-expanded, aria-label, aria-labelledby, aria-live, aria-orientation, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles group, 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. 6 places in the code switch motion off then.

Frequent questions

How do I install Medical practice?

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

Which variants does Medical practice have?

5 variants, Services, Doctors, Consultation hours, Insurance and costs and Online booking. You pick one with the variant prop, for example variant="doctors".

Can I translate the texts of Medical practice?

Yes. Medical practice carries 67 texts of its own in English and German, such as “All”, “to” and “Covered by insurance”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Medical practice?

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

Can I adjust Medical practice without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching MedicalPractice code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Medical practice on a page.