Physiotherapy website sections

For physiotherapy practices. Treatments on a drawn body, the first appointment step by step, a whole prescription booked as a weekly series, co-payment and prices, and exercises for at home.

5 variants

Switch category

From the first complaint to the last session

Patients come to a physiotherapy practice with a complaint and a prescription, and they want to know quickly whether the practice can help and when. These sections start at the body, explain the first visit, book a whole series and make the cost clear before the first session.

Body map draws a figure whose areas can be picked on the body or on chips, each brings its complaints and treatments. First visit lists the first appointment as numbered steps with their time and what to bring. Series booking takes the treatment on the prescription and one free weekly slot and lines up all dates of the series, a holiday moves to the next week and says so. Costs switches between statutory, private and self pay and works out the co-payment from fee and share. Home exercises shows drawn figures moving into their second pose, with a hold timer and a tally for today.

Book series instead of single dates, patients on a prescription need six to ten sessions in a row. Show the co-payment before booking, it answers a question many patients would otherwise ask on the phone. Home exercises keep patients going between sessions and give them a reason to open the site again.

Body mapNew in 1.2

The figure fades in and its lines draw themselves while scrolling, the points follow one by one. Pick an area on the body or on the chips, a soft light moves there and its complaints and treatments slide in.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="body-map" regions={[{ id, label, x: 50, y: 16, complaints: [], treatments: [{ title, text, duration, icon }] }]} bookHref="#" />

Source

First visitNew in 1.2

The first appointment as numbered steps with their time. A line fills from step to step while scrolling, each text rises in. The photo and what to bring stay in view next to it.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="first-visit" steps={[{ title, text, time, icon }]} bring={[…]} media={<img … />} />

Source

Series bookingNew in 1.2

Pick the treatment on the prescription and one free slot in the weekly grid. All dates of the series line up one after another, a holiday moves to the next week and says so. Request it with name and phone.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="series-booking" seriesTreatments={[{ id, label, sessions, duration }]} weekSlots={{ 0: ["08:00"] }} taken={{ 0: ["10:00"] }} startWeek="2026-10-26" closedDays={["2026-11-18"]} onRequest={(data) => …} />

Source

CostsNew in 1.2

Switch between statutory, private and self pay with a sliding pill. Pick a treatment and the number of sessions, the co-payment is worked out from the fee and the share, a bar shows what the insurance pays.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="costs" prices={[{ id, label, duration, statutory, private, selfPay }]} copayFee={10} copayPercent={10} />

Source

Home exercisesNew in 1.2

Drawn figures move once into their second pose when they scroll in, the play button repeats the movement. A ring counts down the hold time, ticking off fills the tally for today.

Installv1.0.0

aiw add @ai-website/physiotherapy

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

Usage

<Physiotherapy variant="home-exercises" exercises={[{ id, title, text, pose: "bridge", dose: "3 × 12", hold: 20 }]} />

Source

Details

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

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.2.0
File: components/ui/physiotherapy.tsx
Brings along: utilskitbutton iconsectionmotioninput
npm packages: None
Languages: English and German, 50 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The PhysiotherapyProps interface from components/ui/physiotherapy.tsx, with the comments from the code.

variantoptional
PhysiotherapyVariant
body-mapfirst-visitseries-bookingcostshome-exercises
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
regionsoptional
PhysioRegion[]
body-map
bookHrefoptional
string
stepsoptional
PhysioStep[]
first-visit
bringoptional
string[]
mediaoptional
React.ReactNode
seriesTreatmentsoptional
PhysioSeriesTreatment[]
series-booking
weekSlotsoptional
Record<string, string[]>
Weekly free times per weekday, 0 is Monday, e.g. { 0: ["08:00", "17:30"] }
takenoptional
Record<string, string[]>
Taken times shown greyed out, e.g. { 0: ["10:00"] }
startWeekoptional
string
Monday of the first week, YYYY-MM-DD
closedDaysoptional
string[]
Days without treatment, YYYY-MM-DD
defaultSlotoptional
{ day: number; time: string }
Slot picked from the start, day 0 is Monday
onRequestoptional
(data: { treatment: string; dates: string[]; time: string; name: string; phone: string }) => void
pricesoptional
PhysioPrice[]
costs
copayFeeoptional
number
Flat fee per prescription for statutory patients
copayPercentoptional
number
Share of the treatment cost for statutory patients in percent
exercisesoptional
PhysioExercise[]
home-exercises
currencyoptional
string

Built-in texts

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

Show all 50 texts

Key	English	German
area	English Where does it hurt?	German Wo tut es weh?
pick	English Show {label}	German {label} zeigen
complaints	English Often seen here	German Häufig hier
treatments	English What helps	German Was hilft
min	English {n} min	German {n} Min.
bookArea	English Book an appointment for this area	German Termin für diesen Bereich buchen
bring	English Please bring	German Bitte mitbringen
treatment	English Treatment	German Behandlung
sessions	English {n} sessions	German {n} Termine
weekday	English Weekday	German Wochentag
time	English Time	German Uhrzeit
days	English Mon,Tue,Wed,Thu,Fri	German Mo,Di,Mi,Do,Fr
series	English Your series	German Deine Serie
seriesHint	English Same day, same time, every week. Holidays move to the next free week.	German Gleicher Tag, gleiche Uhrzeit, jede Woche. Feiertage rücken in die nächste freie Woche.
moved	English moved	German verschoben
session	English Session {n}	German Termin {n}
name	English Name	German Name
phone	English Phone	German Telefon
request	English Request the series	German Serie anfragen
requested	English Requested. We confirm the {n} dates by phone today.	German Angefragt. Wir bestätigen die {n} Termine noch heute telefonisch.
again	English Plan another series	German Weitere Serie planen
errName	English Please enter your name.	German Bitte gib deinen Namen an.
errPhone	English Please enter a phone number so we can reach you.	German Bitte gib eine Telefonnummer an, damit wir dich erreichen.
errSlot	English Please pick a weekday and a time.	German Bitte wähle einen Wochentag und eine Uhrzeit.
busy	English Taken	German Belegt
payer	English How you are insured	German Wie du versichert bist
statutory	English Statutory	German Gesetzlich
private	English Private	German Privat
selfPay	English Self pay	German Selbstzahler
perSession	English per session	German je Termin
count	English Sessions	German Termine
less	English One session less	German Ein Termin weniger
more	English One session more	German Ein Termin mehr
rx	English Prescription fee	German Pauschale je Rezept
share	English {pct} of the treatment cost	German {pct} der Behandlungskosten
copay	English Your co-payment	German Deine Zuzahlung
insurerPays	English Your insurance pays {amount}	German Deine Kasse zahlt {amount}
exempt	English Exempt from co-payments? Bring your certificate and you pay nothing.	German Von der Zuzahlung befreit? Bring den Nachweis mit, dann zahlst du nichts.
privateNote	English You get an invoice, your insurer refunds it according to your plan.	German Du bekommst eine Rechnung, deine Versicherung erstattet nach deinem Tarif.
selfNote	English No prescription needed. Pay by card or cash after each session.	German Ganz ohne Rezept. Bezahlt wird nach jedem Termin mit Karte oder bar.
total	English Total	German Gesamt
exercises	English Exercises for today	German Übungen für heute
done	English Done today	German Heute erledigt
doneN	English {n} of {total} done today	German {n} von {total} heute erledigt
start	English Hold {n} s	German {n} s halten
stop	English Stop	German Stopp
left	English {n} s left	German noch {n} s
play	English Show the movement of {title}	German Bewegung von {title} zeigen
pause	English Pause the movement	German Bewegung anhalten
exNote	English Practise as agreed with your therapist. Move slowly and stay below the pain threshold.	German Übe so, wie es mit deiner Therapeutin besprochen ist. Bewege dich langsam und bleib unter der Schmerzgrenze.

Read from the source of the component.

Physiotherapy handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles alert, group, 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

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 7 places in the code switch motion off then.

Frequent questions

How do I install Physiotherapy?

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

Which variants does Physiotherapy have?

5 variants, Body map, First visit, Series booking, Costs and Home exercises. You pick one with the variant prop, for example variant="first-visit".

Can I translate the texts of Physiotherapy?

Yes. Physiotherapy carries 50 texts of its own in English and German, such as “Where does it hurt?”, “Often seen here” and “What helps”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Physiotherapy?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Physiotherapy with aiw_components and install it with aiw_add @ai-website/physiotherapy. Name the variant in your prompt, for example variant="body-map", 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 Physiotherapy on a page.

From the first complaint to the last session

Physiotherapy

Body mapNew in 1.2

First visitNew in 1.2

Series bookingNew in 1.2

CostsNew in 1.2

Home exercisesNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with