Industries/ Health
Med spa website components for React
Aesthetic clients compare prices and results before they compare locations. A tabbed service menu with prices, before and after sliders per treatment and practitioner credentials answer both questions on one page.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/service-menu @facade/before-after-slider @facade/team-grid @facade/testimonials-wall @facade/faq-section @facade/booking-slots @facade/contact-section @facade/cta-section @facade/footer-big5 of these 10 blocks are Pro and install with a license key; the other 5 are free and MIT licensed. The @facade registry is set up once in components.json. Setup guide.
The page, block by block.
Every preview is the real block running at desktop width. Click a name to open its docs, props and source.
Two ways to open the page.
Example hero copy for med spas. Each one answers the question the visitor actually has.
Headline
What does Botox cost here?
Why it works
A tabbed service menu with prices and durations per treatment category, with no hidden pricing.
Headline
Are the results real?
Why it works
Before and after sliders per treatment, next to the practitioner credentials in the team grid.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Service menuProTabbed price list for salons, barbers and spas with durations, Popular tags and animated transitions.
- Before / after sliderProDraggable, keyboard accessible comparison slider for renovations, staging and remodel photos.
- Team gridFreeTeam members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card.
- Testimonials wallProMasonry wall of Google and Yelp style reviews with a featured quote and aggregate rating header.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Booking slotsProAppointment picker with a 14 day date strip, grouped time slots, summary and confirm callback.
- Contact sectionProContact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.
- CTA sectionFreeClosing CTA panel with headline, two actions and a reassurance line. Dark on light pages, light on dark.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about med spa sites
Something else? Email hello@facadeui.com.
How do I structure the service menu for a med spa?
One tab per category: injectables, laser, skin, body. Each item has a name, duration, price and an optional Popular tag. Prices can be from amounts.
Can I show a before and after per treatment?
Yes. Render one slider per treatment section, or place one in the main flow and link the rest from the service menu items.
Where do medical credentials go?
In the team grid role line, for example RN, certified injector, and in the FAQ. The hero trust items can carry a line such as physician supervised.
Can the booking picker handle consultations and treatments?
Yes. Set the service name to Consultation for the main flow and pass a different duration and price label per booking instance if you render more than one.
Related industries
- Salon10 blocks: local business hero, service menu, image gallery lightbox
- Dentist10 blocks: local business hero, logo cloud, team grid
- Chiropractor10 blocks: local business hero, stats band, process steps
Read the med spa template, section by section or see all industries.