Websites · React
Barber shop
Dark, sharp barber shop site with a cut and shave price list, the barbers, reviews, hours and a booking form.
What you get
A site for a barber shop or men's grooming studio: a dark theme, cuts and shaves with prices, the barbers, customer quotes, opening hours with the address, and an appointment booking form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Sixth Street Barbers", "nav": [ { "label": "Services", "href": "#services" }, { "label": "Barbers", "href": "#barbers" }, { "label": "Hours", "href": "#hours" } ], "navCta": { "label": "Book a chair", "href": "#contact" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Barbers · Fourth Ward, Charlotte", "title": "Good cuts, hot towels, and no rush.", "text": "Four chairs, four barbers, and appointments every 45 minutes so nobody gets hurried out. Walk-ins when there is a gap.", "primary": { "label": "Book a chair", "href": "#contact" }, "secondary": { "label": "Prices", "href": "#services" }, "visual": { "type": "tiles", "tones": [ "#78350f", "#292524", "#57534e", "#1c1917" ], "caption": "Chair two, Saturday morning" }, "note": "Card or cash. Tips welcome, never expected." }, { "kind": "menu", "id": "services", "eyebrow": "Services", "title": "Cuts & shaves", "text": "All cuts include a wash, a hot towel and a neck shave.", "groups": [ { "name": "Hair", "items": [ { "name": "Signature cut", "text": "Scissor or clipper, 45 min", "price": "$42" }, { "name": "Skin fade", "text": "45 min", "price": "$45" }, { "name": "Buzz cut", "text": "One length all over", "price": "$25" }, { "name": "Kids' cut", "text": "Under 12", "price": "$28" } ] }, { "name": "Beard & shave", "items": [ { "name": "Hot towel shave", "text": "Straight razor, two towels, 40 min", "price": "$40" }, { "name": "Beard trim & shape", "text": "With line-up", "price": "$22" }, { "name": "Cut & beard", "text": "The full hour", "price": "$60" }, { "name": "Grey blending", "price": "$30" } ] } ] }, { "kind": "split", "eyebrow": "The shop", "title": "A barber shop that feels like one", "text": "We opened in a 1920s storefront on Sixth Street in 2015. Leather chairs, a record player, and coffee or a cold soda while you wait.", "bullets": [ "Clippers disinfected between every client", "Our own pomade and beard oil, made in Charlotte", "Wheelchair-accessible front entrance" ], "visual": { "type": "card", "tone": "#292524", "title": "Wedding parties", "lines": [ "Cuts and shaves for up to 6", "Shop to yourselves on Sunday", "Whiskey and coffee included" ] }, "reverse": true }, { "kind": "team", "id": "barbers", "eyebrow": "Barbers", "title": "Who is behind the chair", "items": [ { "name": "Andre Wallace", "role": "Owner, fades", "tone": "#78350f" }, { "name": "Luis Ortega", "role": "Scissor cuts", "tone": "#44403c" }, { "name": "Tyler Banks", "role": "Shaves & beards", "tone": "#57534e" }, { "name": "Sam Rivers", "role": "Kids & classic cuts", "tone": "#3f3a2e" } ] }, { "kind": "quotes", "eyebrow": "Reviews", "title": "From the chair", "items": [ { "quote": "Andre has cut my hair for eight years. I moved across town and still drive back.", "name": "Chris M.", "role": "Regular since 2017" }, { "quote": "The hot towel shave is the most relaxing 40 minutes of my month.", "name": "David O.", "role": "Monthly shave" }, { "quote": "My son's first haircut. Sam was patient and gave him a lollipop and the hair in an envelope.", "name": "Keisha T.", "role": "Parent" } ] }, { "kind": "hours", "id": "hours", "eyebrow": "Hours", "title": "When we are open", "text": "Street parking on Sixth Street, free after 6 pm.", "rows": [ { "day": "Tuesday – Friday", "time": "10:00 – 19:00" }, { "day": "Saturday", "time": "8:00 – 16:00" }, { "day": "Sunday", "time": "Private bookings" }, { "day": "Monday", "time": "Closed" } ], "address": "312 W Sixth Street, Charlotte, NC", "phone": "(704) 555-0148", "email": "chair@sixthstreetbarbers.com" }, { "kind": "contact", "eyebrow": "Booking", "title": "Book a chair", "text": "Pick a day and tell us the service and barber you want. We text to confirm the time.", "fields": [ "name", "phone", "date", "message" ], "button": "Request booking" } ], "footer": { "text": "Cuts, fades and hot towel shaves in Fourth Ward.", "columns": [ { "title": "Shop", "links": [ "312 W Sixth Street", "(704) 555-0148" ] }, { "title": "Services", "links": [ "Cuts", "Shaves", "Wedding parties", "Gift cards" ] }, { "title": "Follow", "links": [ "Instagram" ] } ], "legal": "© Sixth Street Barbers. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Barber shop's files. The box is already started for you: finish “Start from Barber shop and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Architecture studio
Editorial architecture practice site with selected projects, the studio's approach, a short history and the team.
Boutique hotel
Elegant small-hotel website with rooms and rates, the restaurant, guest notes, arrival details and a stay request form.
Static website
Plain HTML, CSS, and JavaScript with no build step. Ideal for simple sites and learning.
Build on Barber shop
Create a free account, start from this template, and ask the AI agent to turn it into your app.