Zum Inhalt springen
UI Kit
Accent

Kita

Für Kitas, Krippen und Kindergärten. Das Konzept im gezeichneten Gruppenraum, der Tagesablauf mit Jetzt-Markierung, die Anmeldung mit voraussichtlichem Beginn, die Gruppen und die Eingewöhnung.

5 Variants
Kategorie wechseln

Kita

Konzept im Raum

Der Gruppenraum von oben gezeichnet, seine Bereiche blenden nacheinander ein. Auf einen Bereich zeigen oder ihn wählen, was Kinder dort lernen, erscheint als Chips.

Im Studio öffnen

Tagesablauf

Krippe oder Kindergarten auf einem gleitenden Schalter. Der Tag läuft an einer Linie entlang, die sich beim Scrollen füllt, eine pulsierende Jetzt-Karte zeigt, was gerade passiert.

Im Studio öffnen

Anmeldung

Geburtsdatum, gewünschter Beginn und Stunden am Tag. Der voraussichtliche Beginn und die Wartezeit wechseln sofort, danach eine kurze Anfrage mit ruhiger Bestätigung.

Im Studio öffnen

Gruppen

Nach Krippe oder Kindergarten filtern. Jede Gruppe zeigt belegte Plätze als Punkte, die beim Scrollen hereinspringen, freie Plätze und das Team mit Initialen.

Im Studio öffnen

Eingewöhnung

Die ersten Wochen als Balken, die mit der Zeit wachsen, die dein Kind bleibt. Eine Phase wählen, ihre Beschreibung wechselt und Elternteil und Kind rücken ein Stück weiter auseinander.

Im Studio öffnen

Details

Was Kita mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • 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

Eingebaute Texte

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

Alle 34 Texte anzeigen
cornersEnglisch Corners of the roomDeutsch Bereiche im Raum
learnsEnglisch What children learn hereDeutsch Was Kinder hier lernen
nurseryEnglisch NurseryDeutsch Krippe
kindergartenEnglisch KindergartenDeutsch Kindergarten
nowEnglisch NowDeutsch Jetzt
groupEnglisch GroupDeutsch Gruppe
allEnglisch AllDeutsch Alle
placesEnglisch {n} of {total} places takenDeutsch {n} von {total} Plätzen belegt
freeEnglisch {n} freeDeutsch {n} frei
fullEnglisch FullDeutsch Voll
teamEnglisch TeamDeutsch Team
bornEnglisch Date of birthDeutsch Geburtsdatum
startEnglisch Preferred startDeutsch Gewünschter Beginn
hoursEnglisch Hours a dayDeutsch Stunden am Tag
hoursNEnglisch {n} hoursDeutsch {n} Stunden
likelyEnglisch A place is likely from {date}Deutsch Ein Platz ist voraussichtlich ab {date} frei
waitingEnglisch Expected wait about {n} monthsDeutsch Erwartete Wartezeit etwa {n} Monate
tooYoungEnglisch From {months} months we can welcome your childDeutsch Ab {months} Monaten können wir dein Kind aufnehmen
applyEnglisch Apply for a placeDeutsch Platz anfragen
parentNameEnglisch Your nameDeutsch Dein Name
emailEnglisch EmailDeutsch E-Mail
sentEnglisch Thank you. You are on our list, we confirm by email within a week.Deutsch Danke. Du stehst auf unserer Liste, wir bestätigen innerhalb einer Woche per E-Mail.
dayEnglisch Settling inDeutsch Eingewöhnung
staysEnglisch Your child staysDeutsch Dein Kind bleibt
minutesNEnglisch {n} minutesDeutsch {n} Minuten
hoursFullEnglisch the whole morningDeutsch den ganzen Vormittag
parentRoleEnglisch YouDeutsch Du
inRoomEnglisch stay in the roomDeutsch bleibst im Raum
nearbyEnglisch wait in the parents’ roomDeutsch wartest im Elternzimmer
reachableEnglisch are reachable by phoneDeutsch bist telefonisch erreichbar
prevEnglisch Previous stageDeutsch Vorherige Phase
nextEnglisch Next stageDeutsch Nächste Phase
nameErrorEnglisch Please enter your nameDeutsch Bitte gib deinen Namen ein
emailErrorEnglisch Please enter a valid email addressDeutsch Bitte gib eine gültige E-Mail-Adresse ein

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Kita reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-controls, aria-label, aria-labelledby, aria-live 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.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kita?

Mit aiw add @ai-website/daycare. Der Befehl legt die Datei components/ui/daycare.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, input, section, motion und slider. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Kita?

5 Varianten, Konzept im Raum, Tagesablauf, Anmeldung, Gruppen und Eingewöhnung. Du wählst sie mit der Prop variant, zum Beispiel variant="daily-routine".

Kann ich die Texte von Kita übersetzen?

Ja. Kita bringt 34 eigene Texte auf Deutsch und Englisch mit, etwa „Bereiche im Raum“, „Was Kinder hier lernen“ und „Krippe“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kita einbauen?

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

Kann ich Kita ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kita stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert