Industries/ Beauty
Barber shop website components for React
A barber shop site answers two questions on a phone: walk in or book, and where exactly. The open status, a booking bar that follows the visitor and a location card with directions handle both.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/service-menu @facade/team-grid @facade/image-gallery-lightbox @facade/review-marquee @facade/opening-hours @facade/booking-slots @facade/location-card @facade/footer-big @facade/sticky-contact-bar4 of these 10 blocks are Pro and install with a license key; the other 6 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 barber shops. Each one answers the question the visitor actually has.
Headline
Walk in or book?
Why it works
Live open status in the hero plus a booking bar that follows the visitor on mobile.
Headline
Where exactly are you?
Why it works
A location card with a stylized map, directions link and a parking note.
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.
- Team gridFreeTeam members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card.
- Image gallery lightboxProListing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails.
- 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.
- Location cardFreeStylized SVG map card with a dropped pin, address, hours, phone and a Google Maps directions link.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
- Sticky contact barFreeMobile bottom bar with Call, Text, Directions and Book that hides on scroll down and returns on scroll up.
Questions about barber shop sites
Something else? Email hello@facadeui.com.
Can I show walk-in and appointment options together?
Yes. The opening hours block shows live status for walk-ins and the booking slots block below it takes appointments. The sticky bar links to both Call and Book.
Does the location card use Google Maps?
It draws a stylized SVG map with a pulsing pin and links to Google Maps directions. There is no API key and no third party script.
How do I add a second shop?
Render two location cards and two opening hours blocks, or one of each with a sliding tabs component around them. Each block is independent.
Is the service menu good for short lists?
Yes. With one category it renders without tabs. Add a second tab only when you have beard, shave or kids services to separate.
Related industries
- Salon10 blocks: local business hero, service menu, image gallery lightbox
- Gym10 blocks: local business hero, pricing section, features bento
- Restaurant10 blocks: local business hero, announcement bar, service menu
Read the barber shop template, section by section or see all industries.