Templates/ Restaurant
Restaurant 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? Restaurant website components for React.
Install
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-bigcomponents/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 restaurant 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
Announcement bar
FreeA slim bar above the hero for time bound messages. Dismissed messages stay dismissed.
Change first:messagesintervaltone - 03
Service menu
ProA tabbed price list with durations and Popular tags. Prices in the open.
Set currency and drop durations. Mark the three dishes you want to sell as Popular.
Change first:categoriescurrencybookLabeldefaultCategory - 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
Location card
FreeAddress, hours and phone on a stylized map card with a directions link. No API key.
Change first:nameaddressphonehoursnote - 08
A 14 day date strip with grouped time slots and a confirm callback. Booking without a backend.
Group slots into lunch and dinner. Set the confirm label to Request a table.
Change first:serviceNamedurationMinutespriceLabelgetSlotsclosedWeekdaysonConfirm - 09
FAQ section
FreeAnswers the questions that stop a call, and emits FAQPage JSON-LD from the same array so the answers can show in search.
Change first:itemsheadingphoneemailctaHref - 10
Footer, big
FreeName, address and phone for local search, hours, link columns, a newsletter form and a wordmark.
Change first:businessNameaddressphoneemailhourscolumnssocialslegal
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 restaurant 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.