Salon und Spa
Für Friseure, Kosmetikstudios und Spas. Behandlungen Schritt für Schritt, Preisliste nach Haarlänge, Stylisten mit ihren Arbeiten, Gutscheine mit Live-Karte und Spa-Tage.
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Salon und Spa
Details
Was Salon und Spa mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Industries
- Variants
- 5
- Version
- 1.0.0 · seit 1.1.0
- Datei
- components/ui/salon-spa.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 43 eigene Texte
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle SalonSpaProps aus components/ui/salon-spa.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalSalonSpaVarianttreatmentsprice-liststylistsgift-cardsspa-days
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodetreatmentsoptionalSalonTreatment[]groupsoptionalSalonPriceGroup[]noteoptionalstringprice-list: a line under the list, e.g. about consultation
stylistsoptionalSalonStylist[]amountsoptionalnumber[]gift-cards: preset amounts
designsoptional{ id: string; label: string; image?: React.ReactNode; dark?: boolean }[]gift-cards: card motifs, each a picture behind the text
brandoptionalstringgift-cards: name of the salon on the card
postageoptionalnumbergift-cards: postage for delivery by post
daysoptionalSalonSpaDay[]currencyoptionalstringonBuyoptional(data: Record<string, string>) => void
Eingebaute Texte
Diese Texte schreibt Salon und Spa selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 43 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| categories | Englisch Categories | Deutsch Kategorien |
| team | Englisch Team | Deutsch Team |
| min | Englisch {n} min | Deutsch {n} Min. |
| total | Englisch {n} min in total | Deutsch {n} Min. insgesamt |
| steps | Englisch Step by step | Deutsch Schritt für Schritt |
| suits | Englisch Suits | Deutsch Passt zu |
| book | Englisch Book this treatment | Deutsch Behandlung buchen |
| length | Englisch Hair length | Deutsch Haarlänge |
| short | Englisch Short | Deutsch Kurz |
| medium | Englisch Medium | Deutsch Mittel |
| long | Englisch Long | Deutsch Lang |
| from | Englisch from | Deutsch ab |
| nextFree | Englisch Next free | Deutsch Nächster freier Termin |
| bookWith | Englisch Book with {name} | Deutsch Termin bei {name} |
| work | Englisch Work by {name} | Deutsch Arbeiten von {name} |
| amount | Englisch Amount | Deutsch Betrag |
| other | Englisch Own amount | Deutsch Eigener Betrag |
| design | Englisch Design | Deutsch Motiv |
| to | Englisch For | Deutsch Für |
| toPh | Englisch Name of the lucky one | Deutsch Name der beschenkten Person |
| from2 | Englisch From | Deutsch Von |
| fromPh | Englisch Your name | Deutsch Dein Name |
| message | Englisch A few words | Deutsch Ein paar Worte |
| messagePh | Englisch Happy birthday, time just for you. | Deutsch Alles Gute zum Geburtstag, Zeit nur für dich. |
| delivery | Englisch Delivery | Deutsch Versand |
| Englisch By email, today | Deutsch Per E-Mail, noch heute | |
| post | Englisch By post in an envelope | Deutsch Per Post im Umschlag |
| postFee | Englisch plus {fee} postage | Deutsch zzgl. {fee} Porto |
| buy | Englisch Buy voucher for {amount} | Deutsch Gutschein über {amount} kaufen |
| bought | Englisch Your voucher is on its way | Deutsch Dein Gutschein ist unterwegs |
| boughtText | Englisch You will receive it as a PDF to print or forward. It is valid for three years and works for every treatment. | Deutsch Du bekommst ihn als PDF zum Ausdrucken oder Weiterleiten. Er gilt drei Jahre und für jede Behandlung. |
| again | Englisch Create another voucher | Deutsch Weiteren Gutschein gestalten |
| voucher | Englisch Voucher | Deutsch Gutschein |
| valid | Englisch Valid for 3 years | Deutsch Gültig 3 Jahre |
| perPerson | Englisch per person | Deutsch pro Person |
| forTwo | Englisch For two | Deutsch Zu zweit |
| forOne | Englisch For one | Deutsch Allein |
| guests | Englisch Guests | Deutsch Gäste |
| total2 | Englisch Total | Deutsch Gesamt |
| includes | Englisch Included | Deutsch Inklusive |
| dayPlan | Englisch Your day | Deutsch Dein Tag |
| reserve | Englisch Reserve this day | Deutsch Diesen Tag reservieren |
| required | Englisch Please fill in this field. | Deutsch Bitte fülle dieses Feld aus. |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Salon und Spa reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
- Setzt aria-checked, aria-controls, aria-expanded, aria-label, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen radio, radiogroup, region, status, tab und tablist.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- 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. 8 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Salon und Spa?
Mit aiw add @ai-website/salon-spa. Der Befehl legt die Datei components/ui/salon-spa.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section, motion, input und textarea. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Salon und Spa?
5 Varianten, Behandlungen, Preisliste, Stylisten, Gutscheine und Spa-Tage. Du wählst sie mit der Prop variant, zum Beispiel variant="price-list".
Kann ich die Texte von Salon und Spa übersetzen?
Ja. Salon und Spa bringt 43 eigene Texte auf Deutsch und Englisch mit, etwa „Kategorien“, „Team“ und „Schritt für Schritt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Salon und Spa einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Salon und Spa mit aiw_components und installieren sie mit aiw_add @ai-website/salon-spa. Nenn im Prompt die Variante, etwa variant="treatments", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Salon und Spa ohne Code anpassen?
Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden SalonSpa-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Industries, demselben Bereich des Kits.
- KanzleiRechtsgebiete, Anwälte, Erstberatung, Ergebnisse und Honorar.
- AutohausBestand mit Filtern, Fahrzeugseite, Probefahrt, Finanzierung und Ankauf.
- ArztpraxisLeistungen, Ärzteteam, Sprechzeiten, Kasse und Privat sowie Online-Termin für Praxen.
- ReisenReiseziele, Reise auf einen Blick, Reiseverlauf, Termine und Preise, Leistungen.
- Alles aus IndustriesFertige Sections für Praxen, Restaurants, Handwerk, Hotels, Schulen, Vereine und Creator.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Salon und Spa stehen.
Quellcode lädt