Dental practice

For dentists, orthodontists and dental clinics. Treatments on a drawn arch, a calm page for anxious patients, the cleaning reminder, a cost estimate with the bonus booklet and the emergency guide.

5 variants

Switch category

Treatments on the arch

The upper arch is drawn tooth by tooth as it scrolls in. Pick an area or point at the teeth, the area lights up and its treatments slide in with duration and coverage.

Open in Studio

Installv1.0.0

aiw add @ai-website/dental

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

Usage

<Dental variant="treatments" missing={[13]} zones={[{ id, title, icon, teeth: [5, 6, 7], treatments: [{ title, text, duration, coverage: "statutory" }] }]} />

Source

Anxious patients

Calm promises rise one after another, a ring breathes slowly beside them. Patients tick what helps them and watch a note to the team build up, then book with it.

Open in Studio

Installv1.0.0

aiw add @ai-website/dental

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

Usage

<Dental variant="anxious-patients" promises={[{ title, text, icon }]} comforts={[{ id, title, text, icon }]} />

Source

Cleaning reminder

Pick an interval and the last cleaning, the next two years appear as dates on a line that fills as it scrolls in. Choose text, email or letter and set the reminder.

Open in Studio

Installv1.0.0

aiw add @ai-website/dental

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

Usage

<Dental variant="recall" intervals={[3, 6, 12]} lastVisit="2026-10" />

Source

Cost estimate

Pick a treatment, the years in the bonus booklet and the insurance. What insurance pays and what remains glide along on one bar.

Open in Studio

Installv1.0.0

aiw add @ai-website/dental

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

Usage

<Dental variant="cost-estimate" costs={[{ id, title, icon, total, standard }]} grants={{ none: 60, five: 70, ten: 75 }} privateShare={80} />

Source

Toothache guide

Open now with a live dot and the right number. Pick what happened, the advice says how urgent it is and offers the matching action, first aid tips rise below.

Open in Studio

Installv1.0.0

aiw add @ai-website/dental

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

Usage

<Dental variant="emergency" phone="…" emergencyPhone="…" hours={[{ day: 1, label, time: "08:00-18:00" }]} symptoms={[{ id, title, level: "now", advice }]} tips={[{ title, text, icon }]} />

Source

Details

What Dental 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/dental.tsx
Brings along: utilskitbutton icon inputrevealsectionmotion
npm packages: None
Languages: English and German, 57 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 DentalProps interface from components/ui/dental.tsx, with the comments from the code.

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

Built-in texts

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

Show all 57 texts

Key	English	German
zones	English Area of the mouth	German Bereich im Mund
treatmentsN	English {n} treatments	German {n} Behandlungen
statutory	English Covered by public insurance	German Kassenleistung
partial	English With co-payment	German Mit Zuzahlung
private	English Private service	German Privatleistung
book	English Book an appointment	German Termin buchen
comfort	English What helps you	German Was dir hilft
note	English Your note to the team	German Deine Notiz an das Team
noteEmpty	English Choose what helps you, we read it before your visit.	German Wähle, was dir hilft. Wir lesen es vor deinem Termin.
sendNote	English Book with this note	German Mit dieser Notiz buchen
sent	English We have your note. The team reads it before your visit.	German Deine Notiz ist da. Das Team liest sie vor deinem Termin.
breathe	English Breathe along	German Atme mit
in	English Breathe in	German Einatmen
out	English Breathe out	German Ausatmen
calm	English Breathe calmly	German Ruhig atmen
interval	English Reminder every	German Erinnerung alle
monthsN	English {n} months	German {n} Monate
last	English Last cleaning	German Letzte Reinigung
channel	English Remind me by	German Erinnern per
sms	English Text message	German SMS
email	English Email	German E-Mail
letter	English Letter	German Brief
contactSms	English Mobile number	German Handynummer
contactEmail	English Email address	German E-Mail-Adresse
contactLetter	English Postal address	German Postanschrift
contactError	English Please enter where we can reach you	German Bitte gib an, wie wir dich erreichen
upcoming	English Your next cleanings	German Deine nächsten Reinigungen
remind	English Set up the reminder	German Erinnerung einrichten
reminded	English Reminder set. We get in touch two weeks before your cleaning in {date}.	German Erinnerung eingerichtet. Wir melden uns zwei Wochen vor deiner Reinigung im {date}.
treatment	English Treatment	German Behandlung
bonus	English Bonus booklet	German Bonusheft
bonus0	English No entries	German Keine Einträge
bonus5	English 5 years	German 5 Jahre
bonus10	English 10 years	German 10 Jahre
insurance	English Insurance	German Versicherung
public	English Public	German Gesetzlich
privateIns	English Private	German Privat
yourShare	English Your share, around	German Dein Anteil, etwa
own	English Your share	German Dein Anteil
to	English to	German bis
insurer	English Insurance pays	German Versicherung zahlt
totalCost	English Total cost	German Gesamtkosten
estimateNote	English An estimate. The treatment and cost plan from the practice is binding.	German Eine Schätzung. Verbindlich ist der Heil- und Kostenplan der Praxis.
plan	English Request a cost plan	German Kostenplan anfordern
whatHappened	English What happened?	German Was ist passiert?
now	English Call us now	German Ruf uns sofort an
today	English Come in today	German Komm heute vorbei
soon	English Book this week	German Termin diese Woche
call	English Call {phone}	German {phone} anrufen
slot	English Book a pain slot today	German Schmerztermin heute buchen
week	English Book an appointment	German Termin buchen
openNow	English Open now, until {time}	German Jetzt geöffnet, bis {time} Uhr
closed	English Closed now	German Gerade geschlossen
outOfHours	English Out of hours	German Außerhalb der Sprechzeiten
hours	English Opening hours	German Sprechzeiten
closedDay	English Closed	German Geschlossen
firstAid	English Until you are here	German Bis du bei uns bist

Read from the source of the component.

Dental practice handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles checkbox, radio, radiogroup and status.
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).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Dental practice?

With aiw add @ai-website/dental. The command puts components/ui/dental.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 Dental practice have?

5 variants, Treatments on the arch, Anxious patients, Cleaning reminder, Cost estimate and Toothache guide. You pick one with the variant prop, for example variant="anxious-patients".

Can I translate the texts of Dental practice?

Yes. Dental practice carries 57 texts of its own in English and German, such as “Area of the mouth”, “Covered by public insurance” and “With co-payment”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Dental practice?

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

Can I adjust Dental practice without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

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

Dental practice

Treatments on the arch

Anxious patients

Cleaning reminder

Cost estimate

Toothache guide

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with