Zum Inhalt springen
UI Kit
Accent

Arztpraxis

Für Arztpraxen, MVZ und Therapiepraxen. Leistungen nach Bereich und Kostenträger, das Team, Sprechzeiten auf der Zeitachse, Versicherung und Online-Termin.

5 Variants
Kategorie wechseln

Arztpraxis

Leistungen

Bereiche an der Seite, ein gleitender Filter für Kassen- und Selbstzahlerleistungen, Preise, wo Patienten zahlen.

Im Studio öffnen

Ärzteteam

Ein Verzeichnis mit jeweils einem Profil, Sprachen, Schwerpunkte, Werdegang und Termin. Auf dem Telefon öffnet sich jede Ärztin als Karte.

Im Studio öffnen

Sprechzeiten

Die Woche auf einer Zeitachse nach Art der Sprechstunde, die Balken wachsen beim Hereinscrollen, eine Linie zeigt jetzt. Eine Art mit einem Tipp filtern.

Im Studio öffnen

Kasse und Privat

Gesetzlich, privat oder Selbstzahler mit gleitendem Schalter. Was mitzubringen ist, hakt sich ab, daneben steigen die Selbstzahlerpreise auf.

Im Studio öffnen

Online-Termin

Anlass, Neu- oder Bestandspatient, Versicherung, eine freie Zeit je Arzt und die Angaben. Jeder Schritt gleitet herein, daneben bleiben Zusammenfassung und Notrufnummer.

Im Studio öffnen

Details

Was Arztpraxis mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/medical-practice.tsx
Bringt mit
utilskitbuttoniconinputrevealsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 67 eigene Texte
Studio
Alle 5 Variants bearbeitbar
In Sammlungen
Arztpraxis
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle MedicalPracticeProps aus components/ui/medical-practice.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Arztpraxis selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 67 Texte anzeigen
allEnglisch AllDeutsch Alle
toEnglisch toDeutsch bis
statutoryEnglisch Covered by insuranceDeutsch Kassenleistung
selfPayEnglisch Self-payDeutsch Selbstzahler
filterEnglisch Show servicesDeutsch Leistungen zeigen
groupsEnglisch AreasDeutsch Bereiche
minEnglisch about {n} minDeutsch ca. {n} Min.
noServicesEnglisch No services in this area for this filter.Deutsch Für diesen Filter gibt es in diesem Bereich keine Leistungen.
languagesEnglisch LanguagesDeutsch Sprachen
focusEnglisch FocusDeutsch Schwerpunkte
careerEnglisch CareerDeutsch Werdegang
inPracticeEnglisch In the practiceDeutsch In der Praxis
bookWithEnglisch Book with {name}Deutsch Termin bei {name}
teamEnglisch DoctorsDeutsch Ärztinnen und Ärzte
daysEnglisch Mon,Tue,Wed,Thu,Fri,Sat,SunDeutsch Mo,Di,Mi,Do,Fr,Sa,So
daysLongEnglisch Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,SundayDeutsch Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
openNowEnglisch Open nowDeutsch Jetzt geöffnet
untilEnglisch {kind} until {time}Deutsch {kind} bis {time} Uhr
closedNowEnglisch Closed right nowDeutsch Gerade geschlossen
opensAtEnglisch Opens {day} at {time}Deutsch Wieder geöffnet {day} ab {time} Uhr
todayEnglisch TodayDeutsch Heute
closedEnglisch ClosedDeutsch Geschlossen
kindsEnglisch Kind of consultationDeutsch Art der Sprechstunde
hoursTableEnglisch Consultation hours by dayDeutsch Sprechzeiten nach Tagen
emergencyEnglisch Outside these hoursDeutsch Außerhalb der Sprechzeiten
insuranceEnglisch InsuranceDeutsch Versicherung
bringEnglisch Please bringDeutsch Bitte mitbringen
billingEnglisch How we billDeutsch So rechnen wir ab
pricesEnglisch Self-pay servicesDeutsch Selbstzahlerleistungen
fromEnglisch fromDeutsch ab
stepEnglisch Step {n} of {total}Deutsch Schritt {n} von {total}
stepReasonEnglisch ReasonDeutsch Anlass
stepPatientEnglisch About youDeutsch Zu Ihnen
stepTimeEnglisch TimeDeutsch Uhrzeit
stepDetailsEnglisch DetailsDeutsch Angaben
reasonQEnglisch Why would you like to come?Deutsch Weshalb möchten Sie kommen?
patientQEnglisch Have you been here before?Deutsch Waren Sie schon einmal bei uns?
existingEnglisch Yes, I am a patientDeutsch Ja, ich bin Patient
newPatientEnglisch No, my first visitDeutsch Nein, zum ersten Mal
insuranceQEnglisch How are you insured?Deutsch Wie sind Sie versichert?
timeQEnglisch Pick a timeDeutsch Uhrzeit wählen
anyDoctorEnglisch Any doctorDeutsch Alle Ärzte
noSlotsEnglisch No free times on this day. Please pick another day.Deutsch An diesem Tag ist nichts mehr frei. Bitte wählen Sie einen anderen Tag.
nameEnglisch Full nameDeutsch Vor- und Nachname
birthEnglisch Date of birthDeutsch Geburtsdatum
phoneEnglisch PhoneDeutsch Telefon
emailEnglisch EmailDeutsch E-Mail
optionalEnglisch optionalDeutsch optional
requiredEnglisch Please fill in this field.Deutsch Bitte füllen Sie dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein.
backEnglisch BackDeutsch Zurück
nextEnglisch ContinueDeutsch Weiter
bookEnglisch Book appointmentDeutsch Termin verbindlich buchen
bookedEnglisch Your appointment is bookedDeutsch Ihr Termin ist gebucht
bookedTextEnglisch We have sent the confirmation to you. Please come five minutes early and bring your insurance card.Deutsch Die Bestätigung ist unterwegs zu Ihnen. Bitte kommen Sie fünf Minuten früher und bringen Sie Ihre Versichertenkarte mit.
againEnglisch Book another appointmentDeutsch Weiteren Termin buchen
calendarEnglisch Add to calendarDeutsch In den Kalender
summaryEnglisch Your appointmentDeutsch Ihr Termin
nothingEnglisch Nothing picked yetDeutsch Noch nichts gewählt
acuteEnglisch In an emergency call 112Deutsch Im Notfall die 112 wählen
noAppointmentEnglisch No appointment neededDeutsch Ohne Termin möglich
notThisDayEnglisch Not on this dayDeutsch An diesem Tag nicht
newShortEnglisch New patientDeutsch Neu in der Praxis
existingShortEnglisch Existing patientDeutsch Bereits Patient
acuteTextEnglisch Chest pain, shortness of breath or signs of a stroke never wait for an appointment.Deutsch Brustschmerz, Atemnot oder Zeichen eines Schlaganfalls warten nie auf einen Termin.
newHintEnglisch First visit, please plan 15 minutes for the questionnaire.Deutsch Erster Besuch, bitte planen Sie 15 Minuten für den Anamnesebogen ein.
withEnglisch with {name}Deutsch bei {name}

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Arztpraxis reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-controls, aria-current, aria-expanded, aria-label, aria-labelledby, aria-live, aria-orientation, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, radio, radiogroup, status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 6 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Arztpraxis?

Mit aiw add @ai-website/medical-practice. Der Befehl legt die Datei components/ui/medical-practice.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, input, reveal, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Arztpraxis?

5 Varianten, Leistungen, Ärzteteam, Sprechzeiten, Kasse und Privat und Online-Termin. Du wählst sie mit der Prop variant, zum Beispiel variant="doctors".

Kann ich die Texte von Arztpraxis übersetzen?

Ja. Arztpraxis bringt 67 eigene Texte auf Deutsch und Englisch mit, etwa „Alle“, „bis“ und „Kassenleistung“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Arztpraxis einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Arztpraxis mit aiw_components und installieren sie mit aiw_add @ai-website/medical-practice. Nenn im Prompt die Variante, etwa variant="services", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Arztpraxis ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden MedicalPractice-Code zum Kopieren.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Arztpraxis stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert