Therapiepraxis

Für Psychotherapie, Beratung und Coaching, ruhig gestaltet. Das Erstgespräch Schritt für Schritt, Verfahren, ehrliche Wartezeiten, Kosten nach Versicherung und Hilfe in der Krise.

5 Variants

Kategorie wechseln

Erstgespräch

Die Schritte ziehen beim Scrollen vorbei, der in der Mitte tritt nach vorn. Daneben steht ein ruhiges Bild, seine Ringe schließen sich nacheinander, die Mitte atmet langsam.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/therapy

Bringt mit utils, kit, button, icon, input, reveal, section, motion

Usage

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

Source

Verfahren

Eine ruhige Liste der Verfahren, eine Linie markiert das gewählte. Seine Beschreibung öffnet sich daneben, die Anlässe steigen nacheinander auf. Auf dem Telefon als Akkordeon.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/therapy

Bringt mit utils, kit, button, icon, input, reveal, section, motion

Usage

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

Source

Wartezeiten

Ehrliche Wartezeiten je Angebot, die Balken wachsen beim Scrollen nacheinander herein. Daneben die Warteliste mit Tagen und Tageszeiten als Chips und einer ruhigen Bestätigung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/therapy

Bringt mit utils, kit, button, icon, input, reveal, section, motion

Usage

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

Source

Kosten

Wählen, wie du versichert bist, Preis je Sitzung und der Weg zum Platz erscheinen Schritt für Schritt, mit einem Hinweis für die Details.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/therapy

Bringt mit utils, kit, button, icon, input, reveal, section, motion

Usage

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

Source

In der Krise

Die Nummer, die jetzt hilft, groß und antippbar, darunter steigen weitere Kontakte auf. Daneben führt eine Übung durch die Sinne, ein Tipp nach dem anderen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/therapy

Bringt mit utils, kit, button, icon, input, reveal, section, motion

Usage

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

Source

Details

Was Therapiepraxis mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/therapy.tsx
Bringt mit: utilskitbutton icon inputrevealsectionmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 31 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

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

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

Eingebaute Texte

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

Alle 31 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Therapiepraxis reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-controls, aria-expanded, aria-label, aria-labelledby, aria-live, aria-orientation, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup, status, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
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. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Therapiepraxis?

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

5 Varianten, Erstgespräch, Verfahren, Wartezeiten, Kosten und In der Krise. Du wählst sie mit der Prop variant, zum Beispiel variant="approach".

Kann ich die Texte von Therapiepraxis übersetzen?

Ja. Therapiepraxis bringt 31 eigene Texte auf Deutsch und Englisch mit, etwa „Was du mitbringst“, „Erstgespräch buchen“ und „Dauer“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Therapiepraxis einbauen?

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

Kann ich Therapiepraxis ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Therapiepraxis stehen.

Therapiepraxis

Erstgespräch

Verfahren

Wartezeiten

Kosten

In der Krise

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit