Free React Salon & Beauty Components
Salon and spa sites sell an experience, and the UI has to feel like the treatment: unhurried, tactile, quiet. This set includes a treatment menu with editorial pacing, ritual steps that walk through an appointment, a stylist gallery, a certification wall, before-and-after care, gift voucher and membership cards, and a booking CTA that closes softly instead of shouting. Written in the voice a good salon actually uses, the price list reads like a card at reception, not a SaaS table.
12 components · MIT licensed · installable with the shadcn CLI
Before & After Care
A pre and post appointment care card, two gentle columns headed before you arrive and afterwards, guidance lines in italic serif, and one primary keyline. Practical instructions, beautifully set.
Booking Ritual CTA
An appointment CTA framed as the start of a ritual, a light serif invitation, a softened primary action, and a quiet phone path beside it. Unhurried, sensory, certain of itself.
Certification Wall
Training diplomas and brand accreditations framed like certificates on a salon wall, double-hairline frames, serif academy names, holder and year lines. React and Tailwind trust.
Gift Voucher Card
A voucher presented like the gift itself, certificate hairlines, a light serif denomination display, a from-someone-lovely line, and a purchase CTA. E-commerce in the beauty voice.
Membership Glow
Beauty memberships with serif tier names like The Monthly Ritual, included treatments as airy lists, per-month prices in tabular figures, and a soft masked halo behind the signature tier.
Quiet Hours
Sensory-friendly quiet hours, weekly low-stimulation session times beside a gentle list of what changes, from dimmed lights to no dryers. A React and Tailwind panel for salons.
Ritual Steps
A signature treatment unfolded as a numbered ritual, large serif numerals, italic sensory step descriptions, and durations in quiet mono. The sequence reads like a printed ceremony card.
Salon Price List
A full salon price list set like a printed tariff document, serif category heads, whisper hairline rows of service, duration and price, and junior/senior stylist columns in tabular figures.
Stylist Gallery
Salon team cards with airy spacing, tall portrait frames, serif names, specialties in soft italic, and a hover lift so delicate it reads as a breath. A lookbook, not a staff grid.
The Salon Shelf
The salon's retail shelf as a designed object, framed product placeholders resting on a drawn hairline shelf, italic why-we-stock-it lines, quiet prices. A React and Tailwind block.
Treatment Menu
A spa treatment menu set like a printed ritual card, serif italic treatment names, duration and price in quiet tabular figures, delicate hairline leaders. Sensory and unhurried.
Treatment Series
Prepaid treatment series set like an invitation, serif packs of three, six or nine with per-visit prices in quiet figures and an italic sharing note. React and Tailwind salon packages.
Frequently asked questions
Can I connect the booking components to my booking system?
Yes, the booking ritual CTA and treatment menu take plain href or onClick props, so they link cleanly to Timely, Fresha, Square Appointments, or your own booking flow. The components handle presentation; your system handles the calendar.
Are these appropriate for a day spa or clinic rather than a hair salon?
Yes. The treatment menu, quiet hours, and ritual steps are deliberately service-agnostic, massage, skin, brows, or cosmetic clinic services all fit. For medical-adjacent clinics, also look at the health category for fees, rebates, and results components.
How customisable is the visual style?
Everything is Tailwind utility classes over your theme tokens, so switching from soft neutrals to a darker moody palette is a token change, not a rewrite. Typography slots inherit your font stack, which is where most of the salon character lives.