Industries/ Beauty
Salon website components for React
Salon visitors want to pick a stylist, see the work and book a time, often on a Sunday evening. The team grid links to the slot picker, the gallery shows the chair work and the opening hours show live status.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/service-menu @facade/image-gallery-lightbox @facade/team-grid @facade/review-marquee @facade/opening-hours @facade/booking-slots @facade/faq-section @facade/contact-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 salons. Each one answers the question the visitor actually has.
Headline
Who should I book with?
Why it works
A team grid with specialties per stylist, each card linked to the slot picker below.
Headline
Are you open Sunday?
Why it works
Opening hours with today highlighted and a live open or closed status in the salon's time zone.
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.
- Image gallery lightboxProListing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails.
- Team gridFreeTeam members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card.
- Review marqueeProTwo rows of customer review cards scrolling in opposite directions with soft faded edges.
- Opening hoursFreeWeekly hours list with today highlighted, live open status, split shifts and closed days.
- Booking slotsProAppointment picker with a 14 day date strip, grouped time slots, summary and confirm callback.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Contact sectionProContact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about salon sites
Something else? Email hello@facadeui.com.
How do I list prices per stylist level?
Use service menu categories for the service types and put the level in the item name, for example Cut, senior stylist. Or render one menu per level with tabs.
Does the opening hours block handle split shifts?
Yes. A day can have more than one open range, for example 9 to 13 and 14 to 19, and closed days render as Closed. The status updates live in the business time zone.
Can I link a stylist card to the booking section?
Yes. Each team member can carry a link. Point it at the booking anchor with a query such as ?stylist=ana and read it in your getSlots function.
How many photos should the gallery have?
Eight to twelve recent photos. The lightbox block accepts a total count so you can show a badge for the rest.
Related industries
- Barber shop10 blocks: local business hero, service menu, team grid
- Med spa10 blocks: local business hero, service menu, before / after slider
- Yoga studio10 blocks: local business hero, service menu, sliding tabs
Read the salon template, section by section or see all industries.