Templates/ Barber shop
Barber shop website template for Next.js
A complete home page composed from 10 Facade blocks, in the order a visitor reads them. This page explains each section: which block, why it is there and which props to change.
Looking at the blocks themselves? Barber shop website components for React.
Install
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-barcomponents/facade; you assemble them in a page file in the order below. 4 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a barber shop site and what to change first.
- 01
Opens the page with the service, a live rating and a phone number. The rotating words name the jobs you want more of.
Change first:rotatingWordsphoneratingreviewCounttrustItemsprimaryCta - 02
Service menu
ProA tabbed price list with durations and Popular tags. Prices in the open.
Change first:categoriescurrencybookLabeldefaultCategory - 03
Team grid
FreeThe people behind the business, with bios on hover and an optional hiring card.
Change first:membersheadingshowHiringCard - 04
A photo grid that opens a lightbox with arrows, keyboard control and thumbnails.
Change first:imagestotalCount - 05
Two rows of review cards scrolling in opposite directions. Density over depth, good above a form.
Change first:reviewsdurationrows - 06
Opening hours
FreeWeekly hours with today highlighted and a live open or closed status computed in your time zone.
Change first:hourstimeZonetitlenote - 07
A 14 day date strip with grouped time slots and a confirm callback. Booking without a backend.
Change first:serviceNamedurationMinutespriceLabelgetSlotsclosedWeekdaysonConfirm - 08
Location card
FreeAddress, hours and phone on a stylized map card with a directions link. No API key.
Use the note prop for parking or the entrance. That line gets read.
Change first:nameaddressphonehoursnote - 09
Footer, big
FreeName, address and phone for local search, hours, link columns, a newsletter form and a wordmark.
Change first:businessNameaddressphoneemailhourscolumnssocialslegal - 10
A mobile only bottom bar with Call, Text, Directions and Book. It hides on scroll down and returns on scroll up.
Book first, Call second. Barber visitors rarely call.
Change first:phoneaddressbookingUrlactions
The full page.
All 10 blocks stacked in order, live, at desktop width. Numbers match the sections above.
Build it in four steps
Step 1
Install the blocks
Run the shadcn command on this page once. Every block of the barber shop page lands in components/facade as editable TypeScript.
Step 2
Configure site data
Create one data file with the business name, address, phone, hours, time zone and services, and pass it to the footer, contact, hours and hero blocks.
Step 3
Replace the copy
Work through the sections below. Each one names the props to change first. Keep one claim per line and no stock phrases.
Step 4
Deploy
Build with next build and deploy to Vercel or any Node host. The blocks are static React, so no extra services are needed.