Zum Inhalt springen
UI Kit
Accent

Courses

Kursübersicht, Lehrplan, Lektion mit Fortschritt, Dozierende, Zertifikat und Zugangspakete.

6 Variants
Kategorie wechseln

Kurse

Kursübersicht

Kurse mit Titelbild, Lehrperson, Länge, Bewertung und Preis, nach Thema gefiltert.

Lehrplan

Eckzahlen, Module mit Lektionen und Vorschau, eine mitlaufende Karte zum Starten.

Lektionsansicht

Player, als erledigt markieren, nächste Lektion, Notizen und Material, Gliederung mit Fortschritt.

Dozierende

Eine Zeile je Lehrperson mit Porträt, Werdegang, Themen und Zahlen.

Zertifikat

Ein Zertifikat mit Siegel und Unterschrift, Download, Teilen und ein Prüflink.

Preise und Zugang

Einzelkurs, alle Kurse und Team, jeweils mit klar benanntem Zugang.

Details

Was Kurse mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
6
Version
1.0.1 · seit 1.0.0
Datei
components/ui/courses.tsx
Bringt mit
utilskitbuttoniconsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 47 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    CoursesVariant

    catalogcurriculumlessoninstructorscertificatepricing

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • coursesoptional
    Course[]
  • courseoptional
    Course

    curriculum, lesson: the course

  • modulesoptional
    CourseModule[]
  • includesoptional
    string[]

    curriculum: what comes with the course

  • currentoptional
    [number, number]

    lesson: module and lesson index that plays

  • mediaoptional
    React.ReactNode

    lesson: the player picture

  • notesoptional
    string

    lesson: text under the player

  • resourcesoptional
    { title: string; size?: string; href: string }[]
  • instructorsoptional
    CoursePerson[]
  • certificateoptional
    CourseCertificate
  • plansoptional
    CoursePlan[]
  • currencyoptional
    string

Eingebaute Texte

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

Alle 47 Texte anzeigen
allEnglisch AllDeutsch Alle
topicsEnglisch TopicsDeutsch Themen
lessonsNEnglisch {n} lessonsDeutsch {n} Lektionen
freeEnglisch FreeDeutsch Kostenlos
reviewsNEnglisch ({n})Deutsch ({n})
modulesNEnglisch {n} modulesDeutsch {n} Module
levelEnglisch LevelDeutsch Niveau
durationEnglisch DurationDeutsch Dauer
lessonsEnglisch LessonsDeutsch Lektionen
modulesEnglisch ModulesDeutsch Module
certificateEnglisch CertificateDeutsch Zertifikat
includedEnglisch IncludedDeutsch Inklusive
previewEnglisch PreviewDeutsch Vorschau
videoEnglisch VideoDeutsch Video
readingEnglisch ReadingDeutsch Text
quizEnglisch QuizDeutsch Quiz
exerciseEnglisch ExerciseDeutsch Übung
startEnglisch Start the courseDeutsch Kurs starten
contentsEnglisch Course contentDeutsch Kursinhalt
progressEnglisch {done} of {total} lessons doneDeutsch {done} von {total} Lektionen erledigt
markDoneEnglisch Mark as doneDeutsch Als erledigt markieren
doneEnglisch DoneDeutsch Erledigt
prevEnglisch Previous lessonDeutsch Vorherige Lektion
nextEnglisch Next lessonDeutsch Nächste Lektion
playEnglisch Play lessonDeutsch Lektion abspielen
notesEnglisch NotesDeutsch Notizen
resourcesEnglisch MaterialsDeutsch Material
currentEnglisch Now playingDeutsch Läuft gerade
studentsEnglisch LearnersDeutsch Lernende
coursesEnglisch CoursesDeutsch Kurse
ratingEnglisch RatingDeutsch Bewertung
awardedEnglisch This certifies thatDeutsch Hiermit wird bestätigt, dass
completedEnglisch has completed the courseDeutsch den folgenden Kurs abgeschlossen hat
dateWordEnglisch DateDeutsch Datum
certIdEnglisch Certificate IDDeutsch Zertifikatsnummer
downloadEnglisch Download as PDFDeutsch Als PDF laden
shareEnglisch Add to your profileDeutsch Im Profil zeigen
copyEnglisch Copy check linkDeutsch Prüflink kopieren
copiedEnglisch Link copiedDeutsch Link kopiert
skillsEnglisch Skills shownDeutsch Nachgewiesene Fähigkeiten
verifyEnglisch Anyone can check this certificateDeutsch Jede Person kann dieses Zertifikat prüfen
hoursNEnglisch {n} hours of learningDeutsch {n} Stunden Lernzeit
perMonthEnglisch / monthDeutsch / Monat
guaranteeEnglisch 30 days to change your mind, money back without questions.Deutsch 30 Tage Bedenkzeit, Geld zurück ohne Fragen.
popularEnglisch Most chosenDeutsch Am häufigsten gewählt
hoursEnglisch {h} h {m} minDeutsch {h} Std. {m} Min.
minutesEnglisch {m} minDeutsch {m} Min.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-checked, aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen progressbar, radio, radiogroup, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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. 12 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kurse?

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

Welche Varianten hat Kurse?

6 Varianten, Kursübersicht, Lehrplan, Lektionsansicht, Dozierende, Zertifikat und Preise und Zugang. Du wählst sie mit der Prop variant, zum Beispiel variant="curriculum".

Kann ich die Texte von Kurse übersetzen?

Ja. Kurse bringt 47 eigene Texte auf Deutsch und Englisch mit, etwa „Alle“, „Themen“ und „Kostenlos“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kurse einbauen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Courses stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert