Therapy practice

For psychotherapy, counselling and coaching practices, calm by design. The first conversation step by step, approaches, honest waiting times, costs by insurance and help in a crisis.

5 variants

Switch category

First conversation

The stages pass by while scrolling, the one in the middle comes to the front. Beside them a calm picture holds still, its rings close one by one and the centre breathes slowly.

Open in Studio

Installv1.0.0

aiw add @ai-website/therapy

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

Usage

<Therapy variant="first-session" stages={[{ title, text, meta, icon }]} bring={["…"]} />

Source

Approaches

A quiet list of approaches with a line that marks the chosen one. Its description opens beside it, the moments it helps with rise in one after another. On the phone the same as an accordion.

Open in Studio

Installv1.0.0

aiw add @ai-website/therapy

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

Usage

<Therapy variant="approach" methods={[{ id, title, summary, fits: ["…"], duration, rhythm }]} />

Source

Waiting times

Honest waiting times per offer, the bars grow in one after another while scrolling. Beside them the waiting list with days and times of day as chips and a calm confirmation.

Open in Studio

Installv1.0.0

aiw add @ai-website/therapy

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

Usage

<Therapy variant="availability" offers={[{ id, title, weeks, text }]} updated="…" />

Source

Costs

Pick how you are insured, the price per session and the way to a place appear, step by step, with a note for the details.

Open in Studio

Installv1.0.0

aiw add @ai-website/therapy

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

Usage

<Therapy variant="costs" paths={[{ id, label, icon, price, steps: ["…"], note }]} />

Source

In a crisis

The number that helps now, large and tappable, further contacts rise in below. Beside them a grounding exercise leads through the senses, one tap at a time.

Open in Studio

Installv1.0.0

aiw add @ai-website/therapy

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

Usage

<Therapy variant="crisis" contacts={[{ label, phone, text }]} grounding={[{ count: 5, sense, icon }]} />

Source

Details

What Therapy 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/therapy.tsx
Brings along: utilskitbutton icon inputrevealsectionmotion
npm packages: None
Languages: English and German, 31 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The TherapyProps interface from components/ui/therapy.tsx, with the comments from the code.

variantoptional
TherapyVariant
first-sessionapproachavailabilitycostscrisis
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
stagesoptional
TherapyStage[]
first-session: what happens, in order
bringoptional
string[]
first-session: things to bring
methodsoptional
TherapyMethod[]
approach
offersoptional
TherapyOffer[]
availability: offers with waiting time
updatedoptional
string
availability: when the times were last updated, shown as written
pathsoptional
TherapyPath[]
costs: one path per kind of insurance
contactsoptional
{ label: string; phone: string; text?: string }[]
crisis: numbers to call, the first is the main one
groundingoptional
{ count: number; sense: string; icon?: IconName }[]
crisis: the grounding steps, e.g. "5 things you can see"
currencyoptional
string

Built-in texts

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

Show all 31 texts

Key	English	German
stepOf	English Step {n} of {total}	German Schritt {n} von {total}
bring	English What to bring	German Was du mitbringst
book	English Book a first conversation	German Erstgespräch buchen
sessions	English Length	German Dauer
rhythm	English Rhythm	German Rhythmus
fits	English It can help when	German Kann helfen, wenn
methods	English Approaches	German Verfahren
asked	English Ask which approach fits you	German Frag uns, welches Verfahren passt
weeks	English {n} weeks	German {n} Wochen
thisWeek	English This week	German Diese Woche
waitAbout	English Waiting time, about	German Wartezeit, etwa
updated	English Updated {date}	German Stand {date}
join	English Join the waiting list	German Auf die Warteliste
when	English When suits you	German Wann passt es dir
days	English Mon,Tue,Wed,Thu,Fri	German Mo,Di,Mi,Do,Fr
morning	English Mornings	German Vormittags
afternoon	English Afternoons	German Nachmittags
evening	English Evenings	German Abends
email	English Email	German E-Mail
sent	English You are on the list. We write as soon as a place is free, usually within {n} weeks.	German Du stehst auf der Liste. Wir schreiben, sobald ein Platz frei ist, meist innerhalb von {n} Wochen.
insured	English How are you insured?	German Wie bist du versichert?
perSession	English per session of 50 minutes	German je Sitzung mit 50 Minuten
covered	English Covered by your insurance	German Übernimmt deine Kasse
howItWorks	English How it works	German So läuft es
notEmergency	English This practice is not an emergency service.	German Diese Praxis ist kein Notdienst.
emailError	English Please enter a valid email address	German Bitte gib eine gültige E-Mail-Adresse ein
ground	English Ground yourself	German Komm im Moment an
groundText	English Name what you notice, one sense at a time.	German Benenne, was du wahrnimmst, einen Sinn nach dem anderen.
next	English Next	German Weiter
again	English Start again	German Noch einmal
done	English Well done. Breathe out slowly.	German Gut gemacht. Atme langsam aus.

Read from the source of the component.

Therapy practice handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, 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 radio, radiogroup, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
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. 3 places in the code switch motion off then.

Frequent questions

How do I install Therapy practice?

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

5 variants, First conversation, Approaches, Waiting times, Costs and In a crisis. You pick one with the variant prop, for example variant="approach".

Can I translate the texts of Therapy practice?

Yes. Therapy practice carries 31 texts of its own in English and German, such as “What to bring”, “Book a first conversation” and “Length”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Therapy practice?

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

Can I adjust Therapy practice without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

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