Classes and schedules

A weekly schedule with filters, class cards with places left, trainers, memberships, a free trial and today’s timeline.

6 variants

Switch category

Weekly schedule

The week by day with category filters, one day at a time on phones.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="schedule" classes={[{ id, name, category, day, start, duration, trainer, spots, taken }]} />

Source

Class cards

Time, trainer, intensity and places left, book or join the waitlist in one tap.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="class-cards" classes={[…]} day={3} onBook={(b) => …} />

Source

Trainers

Portraits with specialties, the quote appears on hover, a swipe row on phones.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="trainers" trainers={[{ name, role, image, specialties, quote, meta }]} />

Source

Memberships

Monthly notice or twelve months, the saving shown, what every plan includes.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="memberships" plans={[{ name, flex, year, features, featured, action }]} included={[…]} joiningFee={29} />

Source

Free trial

Pick a goal and times, leave your details, the studio calls back.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="trial" goals={[{ id, label, icon }]} benefits={[…]} media={<img … />} onBook={(d) => …} />

Source

Today

A timeline of the day: over, live now with progress, next and later.

Installv1.0.1

aiw add @ai-website/fitness

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

Usage

<Fitness variant="today" classes={[…]} />

Source

Details

What Classes and schedules brings along, read from the registry and the source.

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

Props

The FitnessProps interface from components/ui/fitness.tsx, with the comments from the code.

variantoptional
FitnessVariant
scheduleclass-cardstrainersmembershipstrialtoday
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
classesoptional
FitnessClass[]
trainersoptional
FitnessTrainer[]
plansoptional
FitnessPlan[]
includedoptional
{ icon: IconName; label: string }[]
memberships: one line per thing that every plan includes
joiningFeeoptional
number
memberships: joining fee for monthly notice
goalsoptional
{ id: string; label: string; icon: IconName }[]
trial: goals to pick from
benefitsoptional
string[]
trial: what a trial includes
mediaoptional
React.ReactNode
trial: the picture
dayoptional
number
class-cards, today: the day to show, 0 is Monday. Defaults to today in the browser.
nowoptional
string
today: the time to measure against, HH:MM. Defaults to the browser clock.
currencyoptional
string
onBookoptional
(data: Record<string, string>) => void

Built-in texts

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

Show all 46 texts

Key	English	German
days	English Mon,Tue,Wed,Thu,Fri,Sat,Sun	German Mo,Di,Mi,Do,Fr,Sa,So
daysLong	English Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday	German Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag,Sonntag
week	English Week	German Woche
categories	English Categories	German Kategorien
all	English All	German Alle
min	English {n} min	German {n} Min.
freeN	English {n} of {total} free	German {n} von {total} frei
full	English Full	German Ausgebucht
few	English Few places	German Wenige Plätze
book	English Book a place	German Platz buchen
booked	English Booked	German Gebucht
waitlist	English Join the waitlist	German Auf die Warteliste
onWaitlist	English On the waitlist	German Auf der Warteliste
noClasses	English No classes this day.	German An diesem Tag gibt es keine Kurse.
intensity	English Intensity {n} of 3	German Intensität {n} von 3
with	English with {name}	German mit {name}
monthly	English Monthly notice	German Monatlich kündbar
yearly	English 12 months	German 12 Monate
save	English save {n}	German {n} sparen
perMonth	English / month	German / Monat
joining	English One-time joining fee {price}, waived for a 12 month term.	German Einmalige Aufnahmegebühr {price}, entfällt bei 12 Monaten Laufzeit.
allPlans	English In every membership	German In jeder Mitgliedschaft
popular	English Most chosen	German Am häufigsten gewählt
goal	English What would you like to reach?	German Was möchtest du erreichen?
when	English When suits you best?	German Wann passt es dir am besten?
morning	English Mornings	German Morgens
noon	English Lunchtime	German Mittags
evening	English Evenings	German Abends
weekend	English Weekends	German Am Wochenende
name	English Name	German Name
email	English Email	German E-Mail
phone	English Phone	German Telefon
required	English Please fill in this field.	German Bitte fülle dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
goalRequired	English Please pick a goal.	German Bitte wähle ein Ziel.
send	English Book a free trial	German Kostenloses Probetraining buchen
sent	English See you on the mat	German Bis bald auf der Matte
sentText	English We will call you within a day to find a time. Bring sports clothes and a towel, we have the rest.	German Wir rufen dich innerhalb eines Tages an und finden einen Termin. Bring Sportsachen und ein Handtuch mit, den Rest haben wir.
again	English Book for someone else	German Für jemand anderen buchen
live	English Live now	German Läuft gerade
next	English Next	German Als Nächstes
later	English Later today	German Später heute
done	English Over	German Vorbei
today	English Today in the studio	German Heute im Studio
optional	English optional	German optional
level	English Level	German Niveau

Read from the source of the component.

Sets aria-describedby, aria-label, aria-live, aria-pressed, aria-selected, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles group, progressbar, radiogroup, status, tab, tablist and tabpanel.
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. 16 places in the code switch motion off then.

Frequent questions

How do I install Classes and schedules?

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

Which variants does Classes and schedules have?

6 variants, Weekly schedule, Class cards, Trainers, Memberships, Free trial and Today. You pick one with the variant prop, for example variant="class-cards".

Can I translate the texts of Classes and schedules?

Yes. Classes and schedules carries 46 texts of its own in English and German, such as “Mon,Tue,Wed,Thu,Fri,Sat,Sun”, “Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday” and “Week”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Classes and schedules?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Classes and schedules with aiw_components and install it with aiw_add @ai-website/fitness. Name the variant in your prompt, for example variant="schedule", 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 Classes and schedules on a page.