Restaurant Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Restaurant Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import RestaurantPage from @/components/templates/restaurant-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { RestaurantPage, type RestaurantReservation } from "@/components/templates/restaurant-page"

async function reserve(reservation: RestaurantReservation) {
  const response = await fetch("/api/reservations", { method: "POST", body: JSON.stringify(reservation) })
  if (!response.ok) throw new Error("Booking failed")
  return (await response.json()) as { confirmation: string }
}

export default function HomeRoute() {
  return <RestaurantPage linkComponent={Link} timeZone="America/Chicago" partySizeMax={8} onReserve={reserve} />
}

Props

• designdefault "warm"
  "warm" | "dark" | "minimal"

  The whole page's look. warm: a soft amber page with tinted bands and raised cards; dark: a night page in both themes (the tokens switch to dark under the root, overlays render inside it); minimal: a plain page with no bands, an inset hero and border-only cards. Each design picks its own backgrounds unless you set them.

• restaurantdefault "RESTAURANT_INFO"
  RestaurantInfo

  { name, cuisine, priceRange?, street, city, neighborhood?, phone, email, point: { lat, lng }, rating?, reviewCount?, directionsNote? }: the brand, hero line, contact block and map pin.

• hoursdefault "RESTAURANT_HOURS"
  RestaurantDayHours[]

  { day: 0 Sunday ... 6 Saturday, ranges: { label?, open: "17:00", close: "23:00" }[] } per weekday; no ranges is closed, a close at or before the open runs past midnight. Drives the open status, the hours table, the closed days of the calendar and the time slots.

• categoriesdefault "RESTAURANT_MENU_CATEGORIES"
  RestaurantMenuCategory[]

  { id, label, description? }: the menu tabs, in order.

• menudefault "RESTAURANT_MENU"
  RestaurantMenuItem[]

  { id, category, name, description?, price, variants?: { label, price }[], tags?: string[], highlight?, soldOut? }: the dishes and drinks. variants (Glass, Bottle) replace the price; tags are dietary tag ids.

• dietaryTagsdefault "RESTAURANT_DIETARY_TAGS"
  RestaurantDietaryTag[]

  { id, label, icon?, tone? }: the dietary marks and filters. vegan, vegetarian, gluten-free and spicy get a drawn icon by id; an empty array hides the filters.

• storydefault "RESTAURANT_STORY"
  RestaurantStory

  { eyebrow, title, paragraphs, chefName, chefRole, stats: { value, label }[], scene?, image? }: the chef story beside a picture.

• gallerydefault "RESTAURANT_GALLERY"
  RestaurantGalleryImage[]

  { src?, scene?, alt, caption? }: the gallery tiles; without src the scene is drawn (pasta, pizza, salad, steak, fish, dessert, cocktail, wine, room, oven, cellar, terrace).

• eventSpacesdefault "RESTAURANT_EVENT_SPACES"
  RestaurantEventSpace[]

  { id, name, description, capacity, minimum?, scene?, image?, href? }: the private event cards; href defaults to eventsHref#id.

• reviewsdefault "RESTAURANT_REVIEWS"
  Testimonial[]

  Guest quotes with names, the occasion as role and star ratings, shown by TestimonialsSection.

• heroImagedefault ""
  string

  A photo url for the hero; without it the dining room with the oven is drawn in code.

• orderHrefdefault "/order"
  string

  The hero's Order online button; empty hides it.

• eventsHrefdefault "/private-events"
  string

  Plan an event and the event cards link here.

• giftCardsHrefdefault "/gift-cards"
  string

  The gift card band's main button.

• directionsHrefdefault ""
  string

  Get directions; defaults to a Google Maps search for the address.

• labels
  Partial<RestaurantPageLabels>

  Every string on the page (DEFAULT_RESTAURANT_PAGE_LABELS), including the open status sentences, validation messages and the confirmation.

• partySizeMindefault 1
  number

  The smallest party the form books.

• partySizeMaxdefault 10
  number

  The largest party the form books; larger groups are pointed to private events.

• defaultPartySizedefault 2
  number

  The starting party size, kept inside the range.

• timeStepdefault 30
  number

  Minutes between bookable times (at least 5).

• lastSeatingdefault 60
  number

  Minutes before a service closes when the last table can be booked.

• minNoticedefault 30
  number

  Minutes from now before the first time that can still be booked today.

• bookingWindowdefault 60
  number

  How many days ahead the calendar opens.

• timeInputdefault "slots"
  "slots" | "picker"

  slots: a grid of time chips per service with booked times struck through; picker: a TimePicker field limited to the open times.

• isBooked
  (date: string, time: string) => boolean

  Marks taken times ("2026-11-06", "19:30") as booked: struck through and not selectable.

• onReserve
  (reservation: RestaurantReservation) => void | RestaurantReservationResult | Promise<RestaurantReservationResult | void | unknown>

  Called with { date, time, partySize, name, email, phone, notes } once the form is valid. A returned promise keeps the button loading; resolve with { confirmation } to show your number, reject to keep the form and show labels.reserveFailed. Without it, a 900 ms pretend booking.

• timeZonedefault "America/Chicago"
  string

  The restaurant's IANA time zone: the open status, today's row, today's past times and the first bookable day follow it, wherever the guest is.

• now
  Date

  A fixed clock for screenshots and tests; default the live time, read after hydration (the server renders labels.hoursFallback).

• currencydefault "USD"
  string

  ISO 4217 code for the menu prices.

• localedefault ""
  string

  Intl locale for prices, dates and times; empty uses the UIProvider's, else en-US.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: highlight badges, the active menu tab, pressed filters, the chosen time, the calendar selection and review stars.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Reserve a table buttons, the form's submit, the sticky bar and the gift card band.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of panels and cards (0 / 12 / 16 / 24px), with matching inner tiles and time chips.

• menuColumnsdefault 2
  1 | 2

  Dish columns from 768px; phones always get one.

• backgrounddefault "soft"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background. A design picks its own unless you set one (warm: soft, dark: glow, minimal: plain).

• backgroundColordefault "oklch(0.72 0.11 58)"
  string

  The tint and glow color of the main background; each design has its own (warm amber, ember, sand).

• bandBackgrounddefault "tinted"
  "muted" | "tinted" | "gradient" | "dots"

  The look of the alternating bands (warm: tinted, dark: muted; minimal has no bands). Cards and fields inside a band are lifted above it.

• bandColordefault "oklch(0.72 0.11 58)"
  string

  The tint of tinted and gradient bands; defaults to backgroundColor.

• showMenudefault true
  boolean

  The menu with its tabs and filters.

• showReservationdefault true
  boolean

  The booking form. Off, the Reserve buttons and the sticky bar go too.

• showStorydefault true
  boolean

  The chef story with its picture and numbers.

• showGallerydefault true
  boolean

  The photo grid and its lightbox.

• showEventsdefault true
  boolean

  The private event spaces.

• showReviewsdefault true
  boolean

  The guest reviews.

• showLocationdefault true
  boolean

  The address, hours table and map.

• showCtadefault true
  boolean

  The gift card band before the footer.

• stickyReserveBardefault true
  boolean

  On phones, a Reserve a table bar with the open status sticks to the bottom while the form is off screen.

• headerdefault true
  boolean

  The sticky header with the brand, section links, call and Reserve.

• footerdefault true
  boolean

  The footer with Visit, About and Help links.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...).

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials...).

• tabsProps
  Partial<TabsRootProps>

  Anything for the menu TabsRoot (variant, size, activationMode...).

• datePickerProps
  Partial<DatePickerProps>

  Anything for the reservation DatePicker (disabled days, presets, calendarProps...).

• timePickerProps
  Partial<TimePickerProps>

  Anything for the TimePicker when timeInput is "picker".

• galleryProps
  Partial<LightboxGalleryProps>

  Anything for the LightboxGallery (columns, aspect, maxVisible, featured...).

• reviewsProps
  Partial<TestimonialsSectionProps>

  Anything for TestimonialsSection (layout, columns, card...).

• mapProps
  Partial<LocationMapProps>

  Anything for the LocationMap (tileUrl, height, staticOnly, interactive...).

• ctaProps
  Partial<CtaSectionProps>

  Anything for the gift card CtaSection (variant, title, hrefs...).

• stickyBarProps
  Partial<StickyCtaBarProps>

  Anything for the phone StickyCtaBar (variant, showOn, hideOnScroll...).

• animateIndefault true
  boolean

  The hero copy rises in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the header, event cards and footer links (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<RestaurantPageSlot, string>>

  Classes for header, hero, heroMedia, status, menu, menuBar, filters, menuPanel, menuItem, reservation, reservationForm, slots, confirmation, story, gallery, events, eventCard, reviews, location, hours, map, cta, footer and stickyBar.

Parts

FAQ