Salon and spa

For hair salons, beauty studios and spas. Treatments step by step, a price list by hair length, stylists with their work, vouchers with a live card and spa days.

5 variants

Switch category

Treatments

A menu by category. The lead treatment shows its steps as a bar whose segments grow in, the others open in place with their own bar.

Open in Studio

Installv1.0.0

aiw add @ai-website/salon-spa

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

Usage

<SalonSpa variant="treatments" treatments={[{ id, category, title, price, steps: [{ label, minutes }], suits, image }]} />

Source

Price list

Groups with dotted leaders. A gliding switch picks the hair length, every price glides to its new value.

Open in Studio

Installv1.0.0

aiw add @ai-website/salon-spa

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

Usage

<SalonSpa variant="price-list" groups={[{ id, title, rows: [{ id, title, price: [38, 46, 58], from }] }]} note="…" />

Source

Stylists

Portrait, level, specialties and the next free slot with a live dot, three pictures of their work. A swipe row on phones.

Open in Studio

Installv1.0.0

aiw add @ai-website/salon-spa

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

Usage

<SalonSpa variant="stylists" stylists={[{ name, level, image, specialties, next, work: [<img />…], bookHref }]} />

Source

Gift vouchers

Amount, motif, names, a message and delivery. The card updates as you type, the amount rolls in, light follows the pointer.

Open in Studio

Installv1.0.0

aiw add @ai-website/salon-spa

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

Usage

<SalonSpa variant="gift-cards" brand="…" amounts={[25, 50, 100, 150]} designs={[{ id, label, image, dark }]} postage={3} onBuy={(d) => …} />

Source

Spa days

Day packages to pick from. The chosen one shows its day on a line that fills, what is included and the total for one or two.

Open in Studio

Installv1.0.0

aiw add @ai-website/salon-spa

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

Usage

<SalonSpa variant="spa-days" days={[{ id, title, price, schedule: [{ time, label }], includes, image, badge }]} />

Source

Details

What Salon and spa brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/salon-spa.tsx
Brings along: utilskitbutton iconrevealsectionmotioninput textarea
npm packages: None
Languages: English and German, 43 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The SalonSpaProps interface from components/ui/salon-spa.tsx, with the comments from the code.

variantoptional
SalonSpaVariant
treatmentsprice-liststylistsgift-cardsspa-days
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
treatmentsoptional
SalonTreatment[]
groupsoptional
SalonPriceGroup[]
noteoptional
string
price-list: a line under the list, e.g. about consultation
stylistsoptional
SalonStylist[]
amountsoptional
number[]
gift-cards: preset amounts
designsoptional
{ id: string; label: string; image?: React.ReactNode; dark?: boolean }[]
gift-cards: card motifs, each a picture behind the text
brandoptional
string
gift-cards: name of the salon on the card
postageoptional
number
gift-cards: postage for delivery by post
daysoptional
SalonSpaDay[]
currencyoptional
string
onBuyoptional
(data: Record<string, string>) => void

Built-in texts

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

Show all 43 texts

Key	English	German
categories	English Categories	German Kategorien
team	English Team	German Team
min	English {n} min	German {n} Min.
total	English {n} min in total	German {n} Min. insgesamt
steps	English Step by step	German Schritt für Schritt
suits	English Suits	German Passt zu
book	English Book this treatment	German Behandlung buchen
length	English Hair length	German Haarlänge
short	English Short	German Kurz
medium	English Medium	German Mittel
long	English Long	German Lang
from	English from	German ab
nextFree	English Next free	German Nächster freier Termin
bookWith	English Book with {name}	German Termin bei {name}
work	English Work by {name}	German Arbeiten von {name}
amount	English Amount	German Betrag
other	English Own amount	German Eigener Betrag
design	English Design	German Motiv
to	English For	German Für
toPh	English Name of the lucky one	German Name der beschenkten Person
from2	English From	German Von
fromPh	English Your name	German Dein Name
message	English A few words	German Ein paar Worte
messagePh	English Happy birthday, time just for you.	German Alles Gute zum Geburtstag, Zeit nur für dich.
delivery	English Delivery	German Versand
email	English By email, today	German Per E-Mail, noch heute
post	English By post in an envelope	German Per Post im Umschlag
postFee	English plus {fee} postage	German zzgl. {fee} Porto
buy	English Buy voucher for {amount}	German Gutschein über {amount} kaufen
bought	English Your voucher is on its way	German Dein Gutschein ist unterwegs
boughtText	English You will receive it as a PDF to print or forward. It is valid for three years and works for every treatment.	German Du bekommst ihn als PDF zum Ausdrucken oder Weiterleiten. Er gilt drei Jahre und für jede Behandlung.
again	English Create another voucher	German Weiteren Gutschein gestalten
voucher	English Voucher	German Gutschein
valid	English Valid for 3 years	German Gültig 3 Jahre
perPerson	English per person	German pro Person
forTwo	English For two	German Zu zweit
forOne	English For one	German Allein
guests	English Guests	German Gäste
total2	English Total	German Gesamt
includes	English Included	German Inklusive
dayPlan	English Your day	German Dein Tag
reserve	English Reserve this day	German Diesen Tag reservieren
required	English Please fill in this field.	German Bitte fülle dieses Feld aus.

Read from the source of the component.

Salon and spa handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-controls, aria-expanded, aria-label, aria-live and aria-selected, so screen readers announce purpose and state.
Uses the roles radio, radiogroup, region, status, tab and tablist.
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. 8 places in the code switch motion off then.

Frequent questions

How do I install Salon and spa?

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

Which variants does Salon and spa have?

5 variants, Treatments, Price list, Stylists, Gift vouchers and Spa days. You pick one with the variant prop, for example variant="price-list".

Can I translate the texts of Salon and spa?

Yes. Salon and spa carries 43 texts of its own in English and German, such as “Categories”, “Team” and “Step by step”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Salon and spa?

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

Can I adjust Salon and spa without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching SalonSpa code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Salon and spa on a page.

Salon and spa

Treatments

Price list

Stylists

Gift vouchers

Spa days

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with