Zum Inhalt springen
UI Kit
Accent

Zahnarztpraxis

Für Zahnärzte, Kieferorthopäden und Zahnkliniken. Behandlungen am gezeichneten Zahnbogen, eine ruhige Seite für Angstpatienten, die Prophylaxe-Erinnerung, eine Kostenschätzung mit Bonusheft und der Notfall-Wegweiser.

5 Variants
Kategorie wechseln

Zahnarztpraxis

Behandlungen am Zahnbogen

Der Oberkiefer zeichnet sich beim Hereinscrollen Zahn für Zahn. Einen Bereich wählen oder auf die Zähne zeigen, der Bereich leuchtet auf und die Behandlungen gleiten mit Dauer und Kostenträger herein.

Im Studio öffnen

Angstpatienten

Ruhige Versprechen steigen nacheinander auf, daneben atmet ein Ring langsam. Patienten haken an, was ihnen hilft, sehen ihre Notiz an das Team entstehen und buchen damit.

Im Studio öffnen

Prophylaxe-Erinnerung

Intervall und letzte Reinigung wählen, die nächsten zwei Jahre erscheinen als Termine auf einer Linie, die sich beim Hereinscrollen füllt. SMS, E-Mail oder Brief wählen und die Erinnerung einrichten.

Im Studio öffnen

Kostenschätzung

Behandlung, Jahre im Bonusheft und Versicherung wählen. Was die Kasse zahlt und was bleibt, gleitet auf einem Balken mit.

Im Studio öffnen

Notfall-Wegweiser

Jetzt geöffnet mit Live-Punkt und der passenden Nummer. Auswählen, was passiert ist, der Hinweis sagt, wie dringend es ist, und bietet die passende Aktion, darunter steigen Erste-Hilfe-Tipps auf.

Im Studio öffnen

Details

Was Zahnarztpraxis mitbringt, aus Registry und Quellcode gelesen.

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

Props

Die Schnittstelle DentalProps aus components/ui/dental.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    DentalVariant

    treatmentsanxious-patientsrecallcost-estimateemergency

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • zonesoptional
    DentalZone[]

    treatments: areas of the mouth with their treatments

  • missingoptional
    number[]

    treatments: teeth drawn as gaps, e.g. for implants

  • promisesoptional
    { title: string; text?: string; icon?: IconName }[]

    anxious-patients: promises of the practice

  • comfortsoptional
    DentalComfort[]

    anxious-patients: comfort options to choose

  • intervalsoptional
    number[]

    recall: intervals in months to choose

  • lastVisitoptional
    string

    recall: the month of the last cleaning, YYYY-MM. Defaults to the browser date.

  • costsoptional
    DentalCostItem[]

    cost-estimate: treatments with total and standard cost

  • grantsoptional
    { none: number; five: number; ten: number }

    cost-estimate: share of the standard cost public insurance pays, by bonus booklet years

  • privateShareoptional
    number

    cost-estimate: share of the total a private insurance pays, in percent

  • symptomsoptional
    DentalSymptom[]

    emergency: symptoms with their urgency

  • phoneoptional
    string

    emergency: the practice phone and the out of hours service

  • emergencyPhoneoptional
    string
  • hoursoptional
    DentalHours[]
  • tipsoptional
    { title: string; text: string; icon?: IconName }[]

    emergency: first aid tips

  • nowoptional
    { day: number; time: string }

    emergency: fixed time for the open state, e.g. { day: 2, time: '10:30' }. Defaults to the browser clock.

  • currencyoptional
    string

Eingebaute Texte

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

Alle 57 Texte anzeigen
zonesEnglisch Area of the mouthDeutsch Bereich im Mund
treatmentsNEnglisch {n} treatmentsDeutsch {n} Behandlungen
statutoryEnglisch Covered by public insuranceDeutsch Kassenleistung
partialEnglisch With co-paymentDeutsch Mit Zuzahlung
privateEnglisch Private serviceDeutsch Privatleistung
bookEnglisch Book an appointmentDeutsch Termin buchen
comfortEnglisch What helps youDeutsch Was dir hilft
noteEnglisch Your note to the teamDeutsch Deine Notiz an das Team
noteEmptyEnglisch Choose what helps you, we read it before your visit.Deutsch Wähle, was dir hilft. Wir lesen es vor deinem Termin.
sendNoteEnglisch Book with this noteDeutsch Mit dieser Notiz buchen
sentEnglisch We have your note. The team reads it before your visit.Deutsch Deine Notiz ist da. Das Team liest sie vor deinem Termin.
breatheEnglisch Breathe alongDeutsch Atme mit
inEnglisch Breathe inDeutsch Einatmen
outEnglisch Breathe outDeutsch Ausatmen
calmEnglisch Breathe calmlyDeutsch Ruhig atmen
intervalEnglisch Reminder everyDeutsch Erinnerung alle
monthsNEnglisch {n} monthsDeutsch {n} Monate
lastEnglisch Last cleaningDeutsch Letzte Reinigung
channelEnglisch Remind me byDeutsch Erinnern per
smsEnglisch Text messageDeutsch SMS
emailEnglisch EmailDeutsch E-Mail
letterEnglisch LetterDeutsch Brief
contactSmsEnglisch Mobile numberDeutsch Handynummer
contactEmailEnglisch Email addressDeutsch E-Mail-Adresse
contactLetterEnglisch Postal addressDeutsch Postanschrift
contactErrorEnglisch Please enter where we can reach youDeutsch Bitte gib an, wie wir dich erreichen
upcomingEnglisch Your next cleaningsDeutsch Deine nächsten Reinigungen
remindEnglisch Set up the reminderDeutsch Erinnerung einrichten
remindedEnglisch Reminder set. We get in touch two weeks before your cleaning in {date}.Deutsch Erinnerung eingerichtet. Wir melden uns zwei Wochen vor deiner Reinigung im {date}.
treatmentEnglisch TreatmentDeutsch Behandlung
bonusEnglisch Bonus bookletDeutsch Bonusheft
bonus0Englisch No entriesDeutsch Keine Einträge
bonus5Englisch 5 yearsDeutsch 5 Jahre
bonus10Englisch 10 yearsDeutsch 10 Jahre
insuranceEnglisch InsuranceDeutsch Versicherung
publicEnglisch PublicDeutsch Gesetzlich
privateInsEnglisch PrivateDeutsch Privat
yourShareEnglisch Your share, aroundDeutsch Dein Anteil, etwa
ownEnglisch Your shareDeutsch Dein Anteil
toEnglisch toDeutsch bis
insurerEnglisch Insurance paysDeutsch Versicherung zahlt
totalCostEnglisch Total costDeutsch Gesamtkosten
estimateNoteEnglisch An estimate. The treatment and cost plan from the practice is binding.Deutsch Eine Schätzung. Verbindlich ist der Heil- und Kostenplan der Praxis.
planEnglisch Request a cost planDeutsch Kostenplan anfordern
whatHappenedEnglisch What happened?Deutsch Was ist passiert?
nowEnglisch Call us nowDeutsch Ruf uns sofort an
todayEnglisch Come in todayDeutsch Komm heute vorbei
soonEnglisch Book this weekDeutsch Termin diese Woche
callEnglisch Call {phone}Deutsch {phone} anrufen
slotEnglisch Book a pain slot todayDeutsch Schmerztermin heute buchen
weekEnglisch Book an appointmentDeutsch Termin buchen
openNowEnglisch Open now, until {time}Deutsch Jetzt geöffnet, bis {time} Uhr
closedEnglisch Closed nowDeutsch Gerade geschlossen
outOfHoursEnglisch Out of hoursDeutsch Außerhalb der Sprechzeiten
hoursEnglisch Opening hoursDeutsch Sprechzeiten
closedDayEnglisch ClosedDeutsch Geschlossen
firstAidEnglisch Until you are hereDeutsch Bis du bei uns bist

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Zahnarztpraxis reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen checkbox, radio, radiogroup und status.
  • 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).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Zahnarztpraxis?

Mit aiw add @ai-website/dental. Der Befehl legt die Datei components/ui/dental.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 Zahnarztpraxis?

5 Varianten, Behandlungen am Zahnbogen, Angstpatienten, Prophylaxe-Erinnerung, Kostenschätzung und Notfall-Wegweiser. Du wählst sie mit der Prop variant, zum Beispiel variant="anxious-patients".

Kann ich die Texte von Zahnarztpraxis übersetzen?

Ja. Zahnarztpraxis bringt 57 eigene Texte auf Deutsch und Englisch mit, etwa „Bereich im Mund“, „Kassenleistung“ und „Mit Zuzahlung“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Zahnarztpraxis einbauen?

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

Kann ich Zahnarztpraxis ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Zahnarztpraxis stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert