Zum Inhalt springen
UI Kit
Accent

Schule

Für Schulen, Berufskollegs und Akademien. Bildungsgänge nach Abschluss, die Bewerbung mit Checkliste, das Schuljahr, Lehrkräfte und ein Planer für den Tag der offenen Tür.

5 Variants
Kategorie wechseln

Schule

Bildungsgänge

Bildungsgänge nach Abschluss mit Chip-Filter. Jede Karte zeigt Dauer und Schwerpunkte und öffnet die Voraussetzungen an Ort und Stelle.

Im Studio öffnen

Bewerbung

Die Schritte auf einer Linie, die sich bis heute füllt, der aktuelle pulsiert. Daneben die Unterlagen als Checkliste mit Fortschrittsbalken.

Im Studio öffnen

Schuljahr

Das ganze Jahr als Streifen, Ferien als Bänder und Termine als Striche, die hineinwachsen. Darunter alle Termine nach Monat, nach Art gefiltert.

Im Studio öffnen

Lehrkräfte

Ein Verzeichnis mit Suche und Fächerfilter. Treffer werden in Name und Fächern hervorgehoben, jede Karte zeigt Sprechstunde und E-Mail.

Im Studio öffnen

Tag der offenen Tür

Das Programm nach Uhrzeit mit Bereichen als Filter. Einen Workshop-Platz sichern, er springt herein, daneben entsteht der Plan, pro Zeitfenster bleibt es bei einem Workshop.

Im Studio öffnen

Details

Was Schule mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    SchoolVariant

    programsapplicationcalendarteachersopen-day

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • programsoptional
    SchoolProgram[]
  • stepsoptional
    SchoolStep[]
  • documentsoptional
    string[]
  • eventsoptional
    SchoolEvent[]
  • yearStartoptional
    string

    calendar: the school year to draw, YYYY-MM-DD of its first day

  • teachersoptional
    SchoolTeacher[]
  • sessionsoptional
    SchoolSession[]

Eingebaute Texte

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

Alle 32 Texte anzeigen
allEnglisch AllDeutsch Alle
degreeEnglisch DegreeDeutsch Abschluss
durationEnglisch DurationDeutsch Dauer
subjectsEnglisch Focus subjectsDeutsch Schwerpunktfächer
requirementsEnglisch RequirementsDeutsch Voraussetzungen
moreEnglisch More about {name}Deutsch Mehr zu {name}
lessEnglisch LessDeutsch Weniger
processEnglisch How to applyDeutsch So bewirbst du dich
nowEnglisch NowDeutsch Jetzt
doneEnglisch DoneDeutsch Erledigt
docsEnglisch What you needDeutsch Was du brauchst
readyEnglisch {n} of {total} readyDeutsch {n} von {total} bereit
completeEnglisch All documents readyDeutsch Alle Unterlagen bereit
applyEnglisch Start the applicationDeutsch Bewerbung starten
monthsEnglisch Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,DecDeutsch Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez
typesEnglisch Kinds of datesDeutsch Arten von Terminen
calendarEnglisch Add to calendarDeutsch In den Kalender
toEnglisch toDeutsch bis
searchEnglisch Search by name or subjectDeutsch Nach Name oder Fach suchen
countEnglisch {n} of {total}Deutsch {n} von {total}
noTeacherEnglisch Nobody matches this search.Deutsch Niemand passt zu dieser Suche.
officeEnglisch Office hourDeutsch Sprechstunde
writeEnglisch Write an emailDeutsch E-Mail schreiben
sessionsEnglisch ProgrammeDeutsch Programm
tracksEnglisch AreasDeutsch Bereiche
freeEnglisch {n} placesDeutsch {n} Plätze
fullEnglisch FullDeutsch Voll
talkEnglisch Drop inDeutsch Offen für alle
registerEnglisch Save a placeDeutsch Platz sichern
registeredEnglisch Place savedDeutsch Platz gesichert
mineEnglisch Your planDeutsch Dein Plan
nothingEnglisch Save places in workshops to build your plan.Deutsch Sichere dir Plätze in Workshops, dann entsteht hier dein Plan.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-controls, aria-expanded, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rolle group.
  • 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

  • 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. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Schule?

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

Welche Varianten hat Schule?

5 Varianten, Bildungsgänge, Bewerbung, Schuljahr, Lehrkräfte und Tag der offenen Tür. Du wählst sie mit der Prop variant, zum Beispiel variant="application".

Kann ich die Texte von Schule übersetzen?

Ja. Schule bringt 32 eigene Texte auf Deutsch und Englisch mit, etwa „Alle“, „Abschluss“ und „Dauer“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Schule einbauen?

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

Kann ich Schule ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Schule stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert