Industries/ Hospitality
Restaurant website components for React
Restaurant visitors ask whether you are open, what is on the menu and whether they can get a table Friday. A live open badge, a tabbed menu with prices and a reservation slot picker answer all three.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/announcement-bar @facade/service-menu @facade/image-gallery-lightbox @facade/review-marquee @facade/opening-hours @facade/location-card @facade/booking-slots @facade/faq-section @facade/footer-big4 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 restaurants. Each one answers the question the visitor actually has.
Headline
Are you open, and what is on the menu?
Why it works
A live open badge in the hero and a tabbed menu with prices that reads well on a phone.
Headline
Can I get a table Friday?
Why it works
A reservation slot picker grouped by lunch and dinner, and a directions card right under it.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Announcement barFreeSlim top bar that rotates promo messages with a link and collapses smoothly when dismissed.
- 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.
- 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.
- Location cardFreeStylized SVG map card with a dropped pin, address, hours, phone and a Google Maps directions link.
- 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.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about restaurant sites
Something else? Email hello@facadeui.com.
Can the service menu work as a food menu?
Yes. Tabs become starters, mains, desserts and drinks. Each item has a name, description, price and an optional Popular tag. Leave the duration empty.
How do reservations work without a booking system?
The booking slots block collects a date, time and party details through your getSlots and onConfirm functions. Send the request by email or to your reservation tool. It does not hold tables itself.
Can I show kitchen hours and bar hours separately?
Render two opening hours blocks with different titles, or use split shifts inside one block for lunch and dinner service.
What is the announcement bar for in a restaurant?
Holiday hours, a seasonal menu, private dining. Two or three rotating messages with a link each, dismissible and remembered.
Related industries
- Barber shop10 blocks: local business hero, service menu, team grid
- Salon10 blocks: local business hero, service menu, image gallery lightbox
- Gym10 blocks: local business hero, pricing section, features bento
Read the restaurant template, section by section or see all industries.