Courses

A course catalog, a curriculum, a lesson with progress, instructors, a certificate and access plans.

6 variants

Switch category

Catalog

Courses with cover, teacher, length, rating and price, filtered by topic.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="catalog" courses={[{ id, title, topic, level, lessons, duration, rating, price, cover, instructor }]} />

Source

Curriculum

Key numbers, modules with lessons and previews, a sticky card to start.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="curriculum" course={…} modules={[{ title, lessons: [{ title, duration, kind, preview }] }]} includes={[…]} />

Source

Lesson view

Player, mark as done, next lesson, notes and materials, the outline with progress.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="lesson" course={…} modules={[…]} current={[0, 3]} media={<video … />} notes="…" resources={[…]} />

Source

Instructors

One row per teacher with portrait, bio, topics and numbers.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="instructors" instructors={[{ name, role, image, bio, students, courses, rating, topics }]} />

Source

Certificate

A certificate with seal and signature, download, share and a link to check it.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="certificate" certificate={{ name, course, date, id, issuer, signer, signature, skills, verifyUrl }} />

Source

Plans and access

Single course, all access and team, each with its access spelled out.

Installv1.0.1

aiw add @ai-website/courses

Brings along utils, kit, button, icon, section, reveal

Usage

<Courses variant="pricing" plans={[{ name, price, unit, access, features, action, featured }]} />

Source

Details

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

Area: Industries
Variants: 6
Version: 1.0.1 · since 1.0.0
File: components/ui/courses.tsx
Brings along: utilskitbutton iconsectionreveal
npm packages: None
Languages: English and German, 47 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The CoursesProps interface from components/ui/courses.tsx, with the comments from the code.

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

Built-in texts

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

Show all 47 texts

Key	English	German
all	English All	German Alle
topics	English Topics	German Themen
lessonsN	English {n} lessons	German {n} Lektionen
free	English Free	German Kostenlos
reviewsN	English ({n})	German ({n})
modulesN	English {n} modules	German {n} Module
level	English Level	German Niveau
duration	English Duration	German Dauer
lessons	English Lessons	German Lektionen
modules	English Modules	German Module
certificate	English Certificate	German Zertifikat
included	English Included	German Inklusive
preview	English Preview	German Vorschau
video	English Video	German Video
reading	English Reading	German Text
quiz	English Quiz	German Quiz
exercise	English Exercise	German Übung
start	English Start the course	German Kurs starten
contents	English Course content	German Kursinhalt
progress	English {done} of {total} lessons done	German {done} von {total} Lektionen erledigt
markDone	English Mark as done	German Als erledigt markieren
done	English Done	German Erledigt
prev	English Previous lesson	German Vorherige Lektion
next	English Next lesson	German Nächste Lektion
play	English Play lesson	German Lektion abspielen
notes	English Notes	German Notizen
resources	English Materials	German Material
current	English Now playing	German Läuft gerade
students	English Learners	German Lernende
courses	English Courses	German Kurse
rating	English Rating	German Bewertung
awarded	English This certifies that	German Hiermit wird bestätigt, dass
completed	English has completed the course	German den folgenden Kurs abgeschlossen hat
dateWord	English Date	German Datum
certId	English Certificate ID	German Zertifikatsnummer
download	English Download as PDF	German Als PDF laden
share	English Add to your profile	German Im Profil zeigen
copy	English Copy check link	German Prüflink kopieren
copied	English Link copied	German Link kopiert
skills	English Skills shown	German Nachgewiesene Fähigkeiten
verify	English Anyone can check this certificate	German Jede Person kann dieses Zertifikat prüfen
hoursN	English {n} hours of learning	German {n} Stunden Lernzeit
perMonth	English / month	German / Monat
guarantee	English 30 days to change your mind, money back without questions.	German 30 Tage Bedenkzeit, Geld zurück ohne Fragen.
popular	English Most chosen	German Am häufigsten gewählt
hours	English {h} h {m} min	German {h} Std. {m} Min.
minutes	English {m} min	German {m} Min.

Read from the source of the component.

Sets aria-checked, aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles progressbar, radio, radiogroup, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
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. 12 places in the code switch motion off then.

Frequent questions

How do I install Courses?

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

Which variants does Courses have?

6 variants, Catalog, Curriculum, Lesson view, Instructors, Certificate and Plans and access. You pick one with the variant prop, for example variant="curriculum".

Can I translate the texts of Courses?

Yes. Courses carries 47 texts of its own in English and German, such as “All”, “Topics” and “Free”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Courses?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Courses on a page.

Courses

Catalog

Curriculum

Lesson view

Instructors

Certificate

Plans and access

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with