Care services

For home care services, care homes and assisted living. Help by need, a care grade check, the own share in a care home, a day of visits and a free consultation.

5 variants

Switch category

Help by need

Pick what help is needed, the matching services slide in one after another, each marked with who pays.

Open in Studio

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="services" needs={[{ id, label, icon, services: [{ title, text, covered }] }]} />

Source

Care grade check

One question at a time, each slides in from the side and the bar above fills. At the end the five grades light up to the likely one, the points count and the monthly benefits appear.

Open in Studio

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="care-grade" questions={[{ id, area, question, answers: [{ label, points }] }]} grades={[{ grade: 2, from: 27, benefits: [{ label, amount }] }]} />

Source

Care home costs

Pick the care grade and the years in the home. One bar shows what the care fund pays, the relief for long stays and the own share, the amount glides.

Open in Studio

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="home-costs" homeCost={3400} careShare={1450} fundByGrade={{ "2": 805, "3": 1319 }} relief={[15, 30, 50, 75]} />

Source

A day of visits

The visits of one day on a band from morning to night, the markers pop in one after another. Pick one for time, length and carer, the list below follows.

Open in Studio

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="visit-plan" visits={[{ time: "07:30", title, minutes: 40, icon, who }]} />

Source

Free consultation

At home, by phone or video on a gliding switch. Pick a day, its times step in, choose for whom and book, the confirmation repeats day and time.

Open in Studio

Installv1.0.0

aiw add @ai-website/care-services

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

Usage

<CareServices variant="consultation" days={[{ id, label, times: ["09:00", "11:00"] }]} />

Source

Details

What Care services brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/care-services.tsx
Brings along: utilskitbutton icon inputsectionmotion
npm packages: None
Languages: English and German, 47 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The CareServicesProps interface from components/ui/care-services.tsx, with the comments from the code.

variantoptional
CareServicesVariant
servicescare-gradehome-costsvisit-planconsultation
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
needsoptional
CareNeed[]
services
questionsoptional
CareQuestion[]
care-grade
gradesoptional
CareGrade[]
homeCostoptional
number
home-costs: monthly cost of the home, fund payment per grade, relief percent per year
careShareoptional
number
fundByGradeoptional
Record<string, number>
reliefoptional
number[]
visitsoptional
CareVisit[]
visit-plan: the day of one client
daysoptional
{ id: string; label: string; times: string[] }[]
consultation: days and times to pick
currencyoptional
string

Built-in texts

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

Show all 47 texts

Key	English	German
need	English What do you need help with?	German Wobei brauchst du Hilfe?
covered	English Paid by the care fund	German Zahlt die Pflegekasse
selfPay	English Private	German Privat
ask	English Ask for this help	German Diese Hilfe anfragen
step	English Question {n} of {total}	German Frage {n} von {total}
back	English Back	German Zurück
result	English Your likely care grade	German Voraussichtlicher Pflegegrad
grade	English Grade {n}	German Pflegegrad {n}
noGrade	English No care grade yet	German Noch kein Pflegegrad
points	English {n} points	German {n} Punkte
perMonth	English per month	German im Monat
benefits	English What you may receive	German Was dir zustehen kann
again	English Start again	German Neu starten
apply	English Let us help with the application	German Wir helfen beim Antrag
estimate	English An estimate, the assessment of the care fund decides.	German Eine Schätzung, maßgeblich ist die Begutachtung der Pflegekasse.
gradeLabel	English Care grade	German Pflegegrad
years	English Years in the home	German Jahre im Heim
yearsN	English Year {n}	German Jahr {n}
yearsMore	English Year {n} and later	German Ab Jahr {n}
totalCost	English Monthly cost of the home	German Monatliche Heimkosten
fund	English Care fund pays	German Pflegekasse zahlt
surcharge	English Extra relief for long stays	German Entlastung für lange Aufenthalte
own	English You pay, about	German Dein Eigenanteil, etwa
ownShort	English You pay	German Eigenanteil
talk	English Talk to our advisor	German Mit unserer Beraterin sprechen
today	English A day of care	German Ein Tag in der Pflege
visits	English {n} visits	German {n} Besuche
minutes	English {n} min	German {n} Min.
minutesTotal	English {n} min of care a day	German {n} Min. Pflege am Tag
nurse	English With	German Mit
mode	English How would you like to talk?	German Wie möchtest du sprechen?
home	English At home	German Zu Hause
phone	English By phone	German Telefon
video	English Video call	German Video
day	English Day	German Tag
time	English Time	German Uhrzeit
name	English Your name	German Dein Name
phoneNo	English Phone number	German Telefonnummer
forWhom	English For whom	German Für wen
self	English Myself	German Für mich
parent	English A parent	German Mutter oder Vater
partner	English My partner	German Partner
book	English Book a free consultation	German Kostenlose Beratung buchen
booked	English Booked. We call you the day before to confirm.	German Gebucht. Wir rufen am Vortag an und bestätigen.
free	English Free and without obligation	German Kostenlos und unverbindlich
nameError	English Please enter your name	German Bitte gib deinen Namen ein
phoneError	English Please enter a phone number	German Bitte gib eine Telefonnummer ein

Read from the source of the component.

Care services handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-label, aria-live and aria-selected, so screen readers announce purpose and state.
Uses the roles radio, radiogroup, status, tab and tablist.
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

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

Frequent questions

How do I install Care services?

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

Which variants does Care services have?

5 variants, Help by need, Care grade check, Care home costs, A day of visits and Free consultation. You pick one with the variant prop, for example variant="care-grade".

Can I translate the texts of Care services?

Yes. Care services carries 47 texts of its own in English and German, such as “What do you need help with?”, “Paid by the care fund” and “Private”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Care services?

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

Can I adjust Care services without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Care services on a page.

Care services

Help by need

Care grade check

Care home costs

A day of visits

Free consultation

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with