Driving school

For driving schools. Licence classes, a cost calculator, intensive courses, the learning path of a student and a theory quiz with drawn traffic situations.

5 variants

Switch category

Licence classes

Filter by car, motorbike or trailer on a gliding switch. Every class shows its code like on the licence card, the minimum age, what you may drive and the price from. The vehicle rolls a little when you point at the card.

Open in Studio

Installv1.0.0

aiw add @ai-website/driving-school

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

Usage

<DrivingSchool variant="licence-classes" kinds={[{ id, label }]} classes={[{ id, code: "B", title, icon, age: 17, allows: ["…"], from, kind }]} />

Source

Cost calculator

Pick your experience and the lessons jump to a typical number, then fine tune with the slider. The total and the monthly rate glide, a bar splits it into lessons, special drives and fees.

Open in Studio

Installv1.0.0

aiw add @ai-website/driving-school

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

Usage

<DrivingSchool variant="cost-calculator" lessonPrice={65} months={12} fixedItems={[{ id, label, price, qty }]} />

Source

Intensive courses

Course dates with the class code and a plan of every day, theory, driving and exam in three tones that grow in while scrolling. Few seats turn amber, full courses offer the waiting list.

Open in Studio

Installv1.0.0

aiw add @ai-website/driving-school

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

Usage

<DrivingSchool variant="intensive-courses" courses={[{ id, dates, title, classCode: "B", seats, taken, price, plan: [0, 0, 1, …, 2] }]} />

Source

Learning path

The way to the licence as a road that fills to the current step while scrolling, a car marks where you are. The current step shows its progress in segments, a ring beside it counts the same.

Open in Studio

Installv1.0.0

aiw add @ai-website/driving-school

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

Usage

<DrivingSchool variant="learning-path" steps={[{ title, text, state: "current", done: 9, total: 14, icon }]} />

Source

Theory quiz

A drawn traffic situation beside the question. Tick every right answer and check, right answers turn green, a wrong pick shakes and the explanation appears. A score and a sign up at the end.

Open in Studio

Installv1.0.0

aiw add @ai-website/driving-school

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

Usage

<DrivingSchool variant="theory-quiz" questions={[{ id, question, scene: "give-way", options: ["…"], correct: [0], explain, points: 4 }]} />

Source

Details

What Driving 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/driving-school.tsx
Brings along: utilskitbutton iconsectionmotionslider
npm packages: None
Languages: English and German, 38 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The DrivingSchoolProps interface from components/ui/driving-school.tsx, with the comments from the code.

variantoptional
DrivingSchoolVariant
licence-classescost-calculatorintensive-courseslearning-paththeory-quiz
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
classesoptional
DrivingClass[]
licence-classes
kindsoptional
{ id: string; label: string }[]
licence-classes: labels of the vehicle kinds
lessonPriceoptional
number
cost-calculator: price of a lesson, fixed items and the instalment months
fixedItemsoptional
DrivingCostItem[]
monthsoptional
number
coursesoptional
DrivingCourse[]
intensive-courses
stepsoptional
DrivingStep[]
learning-path
questionsoptional
DrivingQuestion[]
theory-quiz
currencyoptional
string

Built-in texts

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

Show all 38 texts

Key	English	German
kind	English Vehicle	German Fahrzeug
all	English All	German Alle
fromAge	English from {n}	German ab {n}
years	English Age	German Alter
youMay	English You may drive	German Damit darfst du fahren
from	English from {price}	German ab {price}
start	English Start with {code}	German Mit {code} starten
lessons	English Driving lessons, 45 min	German Fahrstunden à 45 Min.
lessonsN	English {n} lessons	German {n} Fahrstunden
experience	English Driving experience	German Fahrerfahrung
none	English None	German Keine
some	English Some	German Etwas
lots	English Practised a lot	German Viel geübt
total	English Total, about	German Gesamt, etwa
perMonth	English or {price} a month over {n} months	German oder {price} im Monat über {n} Monate
breakdown	English What it is made of	German Woraus es sich zusammensetzt
note	English Most learners need 25 to 35 lessons. We tell you after the third lesson how many you will likely need.	German Die meisten brauchen 25 bis 35 Fahrstunden. Nach der dritten Stunde sagen wir dir, wie viele du voraussichtlich brauchst.
signUp	English Sign up now	German Jetzt anmelden
seatsLeft	English {n} of {total} seats left	German noch {n} von {total} Plätzen
full	English Fully booked	German Ausgebucht
book	English Book a seat	German Platz buchen
waitlist	English Join the waiting list	German Auf die Warteliste
theory	English Theory	German Theorie
practice	English Driving	German Fahren
exam	English Exam	German Prüfung
path	English Your way to the licence	German Dein Weg zum Führerschein
progressN	English {n} of {total}	German {n} von {total}
ofTotal	English of {total}	German von {total}
nextStep	English Next up	German Als Nächstes
question	English Question {n} of {total}	German Frage {n} von {total}
pointsN	English {n} points	German {n} Punkte
check	English Check answer	German Antwort prüfen
right	English Correct	German Richtig
wrong	English Not quite	German Nicht ganz
next	English Next question	German Nächste Frage
score	English You got {n} of {total} right	German Du hast {n} von {total} richtig
again	English Try again	German Noch einmal
chooseAll	English Tick every correct answer	German Kreuze alle richtigen Antworten an

Read from the source of the component.

Driving school handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles checkbox, radio, radiogroup and status.
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. 5 places in the code switch motion off then.

Frequent questions

How do I install Driving school?

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

Which variants does Driving school have?

5 variants, Licence classes, Cost calculator, Intensive courses, Learning path and Theory quiz. You pick one with the variant prop, for example variant="cost-calculator".

Can I translate the texts of Driving school?

Yes. Driving school carries 38 texts of its own in English and German, such as “Vehicle”, “All” and “Age”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Driving school?

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

Can I adjust Driving school without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Driving school on a page.

Driving school

Licence classes

Cost calculator

Intensive courses

Learning path

Theory quiz

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with