Skip to content
UI Kit
Accent color

School

For schools, colleges and academies. Programmes by degree, the application with a checklist, the school year, teachers and an open day planner.

5 variants
Switch category

School

Programmes

Courses by degree with a chip filter. Each card shows duration and focus subjects and opens its requirements in place.

Open in Studio

Application

The steps on a line that fills up to now, the current one pulses. Next to it the documents as a checklist that ticks with a progress bar.

Open in Studio

School year

The whole year as a strip, holidays as bands and dates as ticks that grow in. Below every date by month, filtered by kind.

Open in Studio

Teachers

A directory with search and a subject filter. Matches are highlighted in name and subjects, each card shows the office hour and an email link.

Open in Studio

Open day

The programme by time with areas as a filter. Save a place in a workshop, it pops in, the plan beside builds up and one workshop per time slot stays the rule.

Open in Studio

Details

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

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

Props

The SchoolProps interface from components/ui/school.tsx, with the comments from the code.

  • 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[]

Built-in texts

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

Show all 32 texts
allEnglish AllGerman Alle
degreeEnglish DegreeGerman Abschluss
durationEnglish DurationGerman Dauer
subjectsEnglish Focus subjectsGerman Schwerpunktfächer
requirementsEnglish RequirementsGerman Voraussetzungen
moreEnglish More about {name}German Mehr zu {name}
lessEnglish LessGerman Weniger
processEnglish How to applyGerman So bewirbst du dich
nowEnglish NowGerman Jetzt
doneEnglish DoneGerman Erledigt
docsEnglish What you needGerman Was du brauchst
readyEnglish {n} of {total} readyGerman {n} von {total} bereit
completeEnglish All documents readyGerman Alle Unterlagen bereit
applyEnglish Start the applicationGerman Bewerbung starten
monthsEnglish Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,DecGerman Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez
typesEnglish Kinds of datesGerman Arten von Terminen
calendarEnglish Add to calendarGerman In den Kalender
toEnglish toGerman bis
searchEnglish Search by name or subjectGerman Nach Name oder Fach suchen
countEnglish {n} of {total}German {n} von {total}
noTeacherEnglish Nobody matches this search.German Niemand passt zu dieser Suche.
officeEnglish Office hourGerman Sprechstunde
writeEnglish Write an emailGerman E-Mail schreiben
sessionsEnglish ProgrammeGerman Programm
tracksEnglish AreasGerman Bereiche
freeEnglish {n} placesGerman {n} Plätze
fullEnglish FullGerman Voll
talkEnglish Drop inGerman Offen für alle
registerEnglish Save a placeGerman Platz sichern
registeredEnglish Place savedGerman Platz gesichert
mineEnglish Your planGerman Dein Plan
nothingEnglish Save places in workshops to build your plan.German Sichere dir Plätze in Workshops, dann entsteht hier dein Plan.

Accessibility

Read from the source of the component.

  • Sets aria-controls, aria-expanded, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
  • Uses the role group.
  • 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

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • 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 School?

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

Which variants does School have?

5 variants, Programmes, Application, School year, Teachers and Open day. You pick one with the variant prop, for example variant="application".

Can I translate the texts of School?

Yes. School carries 32 texts of its own in English and German, such as “All”, “Degree” and “Duration”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with School?

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

Can I adjust School without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to School on a page.

Often searched

Jump to

Copied to the clipboard