Zum Inhalt springen
UI Kit
Accent

Fahrschule

Für Fahrschulen. Führerscheinklassen, ein Kostenrechner, Intensivkurse, der Lernweg eines Fahrschülers und ein Theorie-Quiz mit gezeichneten Verkehrssituationen.

5 Variants
Kategorie wechseln

Fahrschule

Führerscheinklassen

Nach Auto, Motorrad oder Anhänger auf einem gleitenden Schalter filtern. Jede Klasse zeigt ihr Kürzel wie auf dem Führerschein, das Mindestalter, was du fahren darfst, und den Preis ab. Das Fahrzeug rollt beim Zeigen ein Stück.

Im Studio öffnen

Kostenrechner

Fahrerfahrung wählen, die Fahrstunden springen auf einen typischen Wert, dann mit dem Regler feinjustieren. Gesamtpreis und Monatsrate gleiten, ein Balken teilt in Fahrstunden, Sonderfahrten und Gebühren.

Im Studio öffnen

Intensivkurse

Kurstermine mit Klassenkürzel und einem Plan jedes Tages, Theorie, Fahren und Prüfung in drei Tönen, die beim Scrollen hereinwachsen. Wenige Plätze werden bernsteinfarben, volle Kurse bieten die Warteliste.

Im Studio öffnen

Lernweg

Der Weg zum Führerschein als Straße, die sich beim Scrollen bis zum aktuellen Schritt füllt, ein Auto zeigt, wo du stehst. Der aktuelle Schritt zeigt seinen Fortschritt in Segmenten, ein Ring daneben zählt mit.

Im Studio öffnen

Theorie-Quiz

Eine gezeichnete Verkehrssituation neben der Frage. Alle richtigen Antworten ankreuzen und prüfen, richtige werden grün, eine falsche Wahl schüttelt sich und die Erklärung erscheint. Am Ende ein Ergebnis und die Anmeldung.

Im Studio öffnen

Details

Was Fahrschule mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • 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

Eingebaute Texte

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

Alle 38 Texte anzeigen
kindEnglisch VehicleDeutsch Fahrzeug
allEnglisch AllDeutsch Alle
fromAgeEnglisch from {n}Deutsch ab {n}
yearsEnglisch AgeDeutsch Alter
youMayEnglisch You may driveDeutsch Damit darfst du fahren
fromEnglisch from {price}Deutsch ab {price}
startEnglisch Start with {code}Deutsch Mit {code} starten
lessonsEnglisch Driving lessons, 45 minDeutsch Fahrstunden à 45 Min.
lessonsNEnglisch {n} lessonsDeutsch {n} Fahrstunden
experienceEnglisch Driving experienceDeutsch Fahrerfahrung
noneEnglisch NoneDeutsch Keine
someEnglisch SomeDeutsch Etwas
lotsEnglisch Practised a lotDeutsch Viel geübt
totalEnglisch Total, aboutDeutsch Gesamt, etwa
perMonthEnglisch or {price} a month over {n} monthsDeutsch oder {price} im Monat über {n} Monate
breakdownEnglisch What it is made ofDeutsch Woraus es sich zusammensetzt
noteEnglisch Most learners need 25 to 35 lessons. We tell you after the third lesson how many you will likely need.Deutsch Die meisten brauchen 25 bis 35 Fahrstunden. Nach der dritten Stunde sagen wir dir, wie viele du voraussichtlich brauchst.
signUpEnglisch Sign up nowDeutsch Jetzt anmelden
seatsLeftEnglisch {n} of {total} seats leftDeutsch noch {n} von {total} Plätzen
fullEnglisch Fully bookedDeutsch Ausgebucht
bookEnglisch Book a seatDeutsch Platz buchen
waitlistEnglisch Join the waiting listDeutsch Auf die Warteliste
theoryEnglisch TheoryDeutsch Theorie
practiceEnglisch DrivingDeutsch Fahren
examEnglisch ExamDeutsch Prüfung
pathEnglisch Your way to the licenceDeutsch Dein Weg zum Führerschein
progressNEnglisch {n} of {total}Deutsch {n} von {total}
ofTotalEnglisch of {total}Deutsch von {total}
nextStepEnglisch Next upDeutsch Als Nächstes
questionEnglisch Question {n} of {total}Deutsch Frage {n} von {total}
pointsNEnglisch {n} pointsDeutsch {n} Punkte
checkEnglisch Check answerDeutsch Antwort prüfen
rightEnglisch CorrectDeutsch Richtig
wrongEnglisch Not quiteDeutsch Nicht ganz
nextEnglisch Next questionDeutsch Nächste Frage
scoreEnglisch You got {n} of {total} rightDeutsch Du hast {n} von {total} richtig
againEnglisch Try againDeutsch Noch einmal
chooseAllEnglisch Tick every correct answerDeutsch Kreuze alle richtigen Antworten an

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Fahrschule reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen checkbox, radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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 Fahrschule?

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

Welche Varianten hat Fahrschule?

5 Varianten, Führerscheinklassen, Kostenrechner, Intensivkurse, Lernweg und Theorie-Quiz. Du wählst sie mit der Prop variant, zum Beispiel variant="cost-calculator".

Kann ich die Texte von Fahrschule übersetzen?

Ja. Fahrschule bringt 38 eigene Texte auf Deutsch und Englisch mit, etwa „Fahrzeug“, „Alle“ und „Alter“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Fahrschule einbauen?

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

Kann ich Fahrschule ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Fahrschule stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert