Skip to content
UI Kit
Accent color

Yoga studio website sections

For yoga and pilates studios. The week as a calendar, styles on a map from calm to dynamic, a pass finder that knows the cheapest option and the first class step by step with an intro booking.

4 variants
Switch category

From the timetable to the first mat

Someone new to a studio wants to know three things, when, which style and what it costs. These sections answer with a weekly calendar, a map of styles and a pass finder that does the maths, and they end with the first class booked. Pilates and barre studios fit just as well.

Week plan places every class by its time and tints it by intensity, with a level filter and a booking button in the details, on phone and tablet one day at a time. Styles sets every style on a map from calm to dynamic and from gentle to strong and tells who it suits and what to bring. Pass finder asks how often someone practises and moves the badge to the cheapest pass, with the price per class on every card. First class walks through the first visit step by step beside an intro offer with beginner slots and a short form.

Mark beginner classes in the week plan, that is the filter newcomers look for first. Show the price per class next to each pass, then the choice is easy. Put the intro offer on the home page and in the week plan, that is where trial bookings start.

Yoga studio

Week planNew in 1.2

The week as a calendar, each class placed by its time and tinted by its intensity, the blocks rise in while scrolling. Filter by level, pick a class for the details and a booking button. On phone and tablet a day at a time.

StylesNew in 1.2

Every style on a map from calm to dynamic and from gentle to strong, they drift into place while scrolling. Pick one, it breathes on the map and tells who it suits, what to bring and how long it lasts.

Pass finderNew in 1.2

Drag how often you practise, the monthly cost of every pass glides to its new value and the cheapest one moves the badge. Each card shows the price per class, so the choice explains itself.

First classNew in 1.2

What happens at the first visit as steps on a line that draws itself while scrolling. Beside it the intro offer with beginner slots and a short form, missing fields say what they need.

Details

What Yoga studio brings along, read from the registry and the source.

Area
Industries
Variants
4
Version
1.0.0 · since 1.2.0
File
components/ui/yoga-studio.tsx
Brings along
utilskitbuttoniconsection
npm packages
None
Languages
English and German, 40 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The YogaStudioProps interface from components/ui/yoga-studio.tsx, with the comments from the code.

  • variantoptional
    YogaStudioVariant

    week-planstylespass-finderfirst-class

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • classesoptional
    YogaClass[]

    week-plan, first-class (the intro slots)

  • stylesoptional
    YogaStyle[]

    week-plan, styles

  • passesoptional
    YogaPass[]

    pass-finder

  • stepsoptional
    { title: string; text: string; icon?: IconName }[]

    first-class: what happens, step by step

  • offeroptional
    string

    first-class: the offer, e.g. "First class 9 €"

  • dayStartoptional
    string

    week-plan: first and last hour shown, "HH:MM"

  • dayEndoptional
    string
  • stylesHrefoptional
    string

    week-plan: link to the styles section

  • currencyoptional
    string

Built-in texts

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

Show all 40 texts
levelEnglish LevelGerman Niveau
allLevelsEnglish All levelsGerman Alle Niveaus
beginnerEnglish BeginnerGerman Einsteiger
mixedEnglish MixedGerman Gemischt
advancedEnglish ExperiencedGerman Erfahrene
dayEnglish DayGerman Tag
daysEnglish Mon,Tue,Wed,Thu,Fri,Sat,SunGerman Mo,Di,Mi,Do,Fr,Sa,So
minEnglish {n} minGerman {n} Min.
spotsEnglish {n} spots leftGerman noch {n} Plätze
fullEnglish Full, join the waiting listGerman Voll, auf die Warteliste
bookEnglish Book this classGerman Diese Stunde buchen
bookedEnglish Booked. Your mat is waiting.German Gebucht. Deine Matte wartet.
withEnglish with {name}German mit {name}
stylesEnglish StylesGerman Stile
calmEnglish CalmGerman Ruhig
dynamicEnglish DynamicGerman Dynamisch
gentleEnglish GentleGerman Sanft
strongEnglish StrongGerman Kräftig
forWhomEnglish For whomGerman Für wen
bringEnglish Bring alongGerman Mitbringen
durationEnglish DurationGerman Dauer
seeClassesEnglish See {name} in the planGerman {name} im Kursplan ansehen
perWeekEnglish How often do you practise?German Wie oft übst du?
timesWeekEnglish {n} × a weekGerman {n} × pro Woche
timesWeekOneEnglish once a weekGerman einmal pro Woche
perMonthEnglish a monthGerman im Monat
perClassEnglish {price} per classGerman {price} pro Stunde
bestEnglish Best for youGerman Passt am besten
unlimitedEnglish UnlimitedGerman Unbegrenzt
classesNEnglish {n} classesGerman {n} Stunden
chooseEnglish Choose {name}German {name} wählen
stepsEnglish How your first visit goesGerman So läuft dein erster Besuch
slotEnglish Pick an intro classGerman Wähle eine Einführungsstunde
nameEnglish NameGerman Name
emailEnglish EmailGerman E-Mail
requiredEnglish Please fill in this fieldGerman Bitte fülle dieses Feld aus
emailInvalidEnglish Please enter a valid email addressGerman Bitte gib eine gültige E-Mail-Adresse ein
claimEnglish Book the intro classGerman Einführungsstunde buchen
claimedEnglish See you on the matGerman Wir sehen uns auf der Matte
claimedTextEnglish We sent the details to {email}. Come ten minutes early, we show you around.German Die Details sind an {email} unterwegs. Komm zehn Minuten früher, wir zeigen dir alles.

Accessibility

Read from the source of the component.

  • Yoga studio handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
  • Sets aria-checked, aria-describedby, aria-invalid, aria-label, aria-pressed and aria-valuetext, so screen readers announce purpose and state.
  • Uses the roles img, radio, radiogroup and status.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • 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 Yoga studio?

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

Which variants does Yoga studio have?

4 variants, Week plan, Styles, Pass finder and First class. You pick one with the variant prop, for example variant="styles".

Can I translate the texts of Yoga studio?

Yes. Yoga studio carries 40 texts of its own in English and German, such as “Level”, “All levels” and “Beginner”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Yoga studio?

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

Often searched

Jump to

Copied to the clipboard