Daycare

For daycare centres, nurseries and kindergartens. The concept in a drawn group room, the daily routine with a now marker, enrollment with the likely start, the groups and settling in.

5 variants

Switch category

Concept in the room

The group room drawn from above, its corners fade in one after another. Point at a corner or pick it, what children learn there swaps in as chips.

Open in Studio

Installv1.0.0

aiw add @ai-website/daycare

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

Usage

<Daycare variant="concept" corners={[{ id, name, x, y, w, h, tint: "#f6d7a7", icon, learns: ["…"], text }]} />

Source

Daily routine

Nursery or kindergarten on a gliding switch. The day runs down a line that fills while scrolling, a pulsing now card shows what is happening at this moment.

Open in Studio

Installv1.0.0

aiw add @ai-website/daycare

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

Usage

<Daycare variant="daily-routine" routines={[{ id, label, moments: [{ time: "07:00", title, text, icon }] }]} />

Source

Enrollment

Birth date, wanted start and hours a day. The likely start and the waiting time swap in at once, then a short request with a calm confirmation.

Open in Studio

Installv1.0.0

aiw add @ai-website/daycare

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

Usage

<Daycare variant="enrollment" minMonths={12} intakes={["2027-01", "2027-08"]} />

Source

Groups

Filter by nursery or kindergarten. Every group shows its taken places as dots that pop in while scrolling, free places and the team with initials.

Open in Studio

Installv1.0.0

aiw add @ai-website/daycare

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

Usage

<Daycare variant="groups" groups={[{ id, name, ages, kind: "nursery", children, places, team: ["…"], icon }]} />

Source

Settling in

The first weeks as bars that grow with the time your child stays. Pick a stage, its description swaps in and parent and child drift a little further apart.

Open in Studio

Installv1.0.0

aiw add @ai-website/daycare

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

Usage

<Daycare variant="settling-in" days={[{ label, title, text, minutes: 60, parent: "in-room" }]} />

Source

Details

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

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

Props

The DaycareProps interface from components/ui/daycare.tsx, with the comments from the code.

variantoptional
DaycareVariant
conceptdaily-routineenrollmentgroupssettling-in
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
cornersoptional
DaycareCorner[]
concept: corners of the group room
routinesoptional
{ id: string; label: string; moments: DaycareMoment[] }[]
daily-routine: the day per age group
nowoptional
string
daily-routine: fixed time for the now line, e.g. "10:20". Defaults to the browser clock.
groupsoptional
DaycareGroup[]
groups
minMonthsoptional
number
enrollment: youngest age in months and the month places open, YYYY-MM
intakesoptional
string[]
todayoptional
string
enrollment: the month to count from, YYYY-MM. Defaults to the browser date.
daysoptional
DaycareDay[]
settling-in

Built-in texts

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

Show all 34 texts

Key	English	German
corners	English Corners of the room	German Bereiche im Raum
learns	English What children learn here	German Was Kinder hier lernen
nursery	English Nursery	German Krippe
kindergarten	English Kindergarten	German Kindergarten
now	English Now	German Jetzt
group	English Group	German Gruppe
all	English All	German Alle
places	English {n} of {total} places taken	German {n} von {total} Plätzen belegt
free	English {n} free	German {n} frei
full	English Full	German Voll
team	English Team	German Team
born	English Date of birth	German Geburtsdatum
start	English Preferred start	German Gewünschter Beginn
hours	English Hours a day	German Stunden am Tag
hoursN	English {n} hours	German {n} Stunden
likely	English A place is likely from {date}	German Ein Platz ist voraussichtlich ab {date} frei
waiting	English Expected wait about {n} months	German Erwartete Wartezeit etwa {n} Monate
tooYoung	English From {months} months we can welcome your child	German Ab {months} Monaten können wir dein Kind aufnehmen
apply	English Apply for a place	German Platz anfragen
parentName	English Your name	German Dein Name
email	English Email	German E-Mail
sent	English Thank you. You are on our list, we confirm by email within a week.	German Danke. Du stehst auf unserer Liste, wir bestätigen innerhalb einer Woche per E-Mail.
day	English Settling in	German Eingewöhnung
stays	English Your child stays	German Dein Kind bleibt
minutesN	English {n} minutes	German {n} Minuten
hoursFull	English the whole morning	German den ganzen Vormittag
parentRole	English You	German Du
inRoom	English stay in the room	German bleibst im Raum
nearby	English wait in the parents’ room	German wartest im Elternzimmer
reachable	English are reachable by phone	German bist telefonisch erreichbar
prev	English Previous stage	German Vorherige Phase
next	English Next stage	German Nächste Phase
nameError	English Please enter your name	German Bitte gib deinen Namen ein
emailError	English Please enter a valid email address	German Bitte gib eine gültige E-Mail-Adresse ein

Read from the source of the component.

Daycare handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, aria-label, aria-labelledby, aria-live 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.
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. 5 places in the code switch motion off then.

Frequent questions

How do I install Daycare?

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

Which variants does Daycare have?

5 variants, Concept in the room, Daily routine, Enrollment, Groups and Settling in. You pick one with the variant prop, for example variant="daily-routine".

Can I translate the texts of Daycare?

Yes. Daycare carries 34 texts of its own in English and German, such as “Corners of the room”, “What children learn here” and “Nursery”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Daycare?

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

Can I adjust Daycare without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Daycare on a page.

Daycare

Concept in the room

Daily routine

Enrollment

Groups

Settling in

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with