Restaurant website sections

For restaurants, bistros and wine bars, next to the menu. Table booking on a drawn floor plan, special evenings with seats left, the room by time of day and private dining for groups.

4 variants

Switch category

Everything around the table

Next to the menu, a restaurant website answers three questions, is there a table, what is special this month and what does the evening feel like. These sections answer them with drawn rooms, seats left and prices that follow the size of the party. For the menu itself the kit has its own category for menus.

Table booking picks the day, the party and a time, slots with few tables carry an amber dot, and the area is chosen on a drawn floor plan. Special evenings show wine dinners, chef's table and supper clubs as date cards with a seat bar, the running order slides in course by course. Atmosphere draws the dining room from lunch to dinner to the late bar, with volume, music and dress beside it. Private dining keeps the rooms that fit the group open, picks the right one and estimates the menu for everyone.

Put table booking high on the page, most visitors come to reserve. Special evenings sell best with the seats left in view. Private dining deserves its own page for companies and families, linked from the footer and from the booking.

Table bookingNew in 1.2

Pick the day, the party and a time, few tables carry an amber dot. The area is chosen on a drawn floor plan whose tables set in while scrolling, free ones in green, the chosen area in the accent.

Installv1.0.0

aiw add @ai-website/restaurant

Brings along utils, kit, button, icon, section, motion

Usage

<Restaurant variant="reservation" days={[{ id, weekday, day, closed }]} slots={[{ time: "18:30", free: 4 }]} areas={[{ id, name, text, x, y, w, h, tables, free, outdoor }]} />

Source

Special eveningsNew in 1.2

Wine dinners, chef’s table and supper clubs as date cards with a seat bar, few seats turn amber. Pick one, the running order slides in course by course and the price on the button glides with the seats.

Installv1.0.0

aiw add @ai-website/restaurant

Brings along utils, kit, button, icon, section, motion

Usage

<Restaurant variant="evenings" evenings={[{ id, weekday, day, month, title, kind, text, time: "19:00", price, seats, seatsLeft, courses, host }]} />

Source

AtmosphereNew in 1.2

The dining room drawn by time of day. Switch from lunch to dinner to the late bar, the windows darken, the lamps glow, candles flicker and the room fills. Volume, music and dress swap alongside.

Installv1.0.0

aiw add @ai-website/restaurant

Brings along utils, kit, button, icon, section, motion

Usage

<Restaurant variant="atmosphere" moods={[{ id, name, from: "12:00", to: "14:30", text, dusk: 0.1, volume: 2, music, dress, goodFor }]} />

Source

Private diningNew in 1.2

Drag the group size, rooms that fit stay open and the right one is chosen for you. Pick a menu, the estimate for the whole group glides along and the request goes out with one button.

Installv1.0.0

aiw add @ai-website/restaurant

Brings along utils, kit, button, icon, section, motion

Usage

<Restaurant variant="private-dining" minGuests={8} maxGuests={60} rooms={[{ id, name, min, max, text, media }]} menus={[{ id, name, price, courses }]} />

Source

Details

What Restaurant brings along, read from the registry and the source.

Area: Industries
Variants: 4
Version: 1.0.0 · since 1.2.0
File: components/ui/restaurant.tsx
Brings along: utilskitbutton iconsectionmotion
npm packages: None
Languages: English and German, 45 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The RestaurantProps interface from components/ui/restaurant.tsx, with the comments from the code.

variantoptional
RestaurantVariant
reservationeveningsatmosphereprivate-dining
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
daysoptional
RestaurantDay[]
reservation
slotsoptional
{ time: string; free: number }[]
reservation: times "HH:MM", with free tables
areasoptional
RestaurantArea[]
maxPartyoptional
number
reservation: largest party for a normal table
eveningsoptional
RestaurantEvening[]
evenings
moodsoptional
RestaurantMood[]
atmosphere
roomsoptional
RestaurantRoom[]
private-dining
menusoptional
RestaurantMenuOption[]
minGuestsoptional
number
maxGuestsoptional
number
currencyoptional
string

Built-in texts

Restaurant writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 45 texts

Key	English	German
day	English Day	German Tag
closed	English Closed	German Ruhetag
guests	English Guests	German Personen
less	English One guest less	German Eine Person weniger
more	English One guest more	German Eine Person mehr
bigGroup	English From {n} guests our private room is the better fit.	German Ab {n} Personen passt unser Separee besser.
time	English Time	German Uhrzeit
area	English Where would you like to sit?	German Wo möchtest du sitzen?
plan	English Floor plan	German Raumplan
tablesFree	English {n} tables free	German {n} Tische frei
tableFree	English 1 table free	German 1 Tisch frei
full	English Fully booked	German Ausgebucht
reserve	English Reserve a table for {n}	German Tisch für {n} reservieren
reserved	English Your table is reserved. A confirmation is on its way.	German Dein Tisch ist reserviert. Die Bestätigung ist unterwegs.
summary	English {guests} guests · {day} · {time}	German {guests} Personen · {day} · {time}
seatsLeft	English {n} of {total} seats left	German Noch {n} von {total} Plätzen
soldOut	English Sold out, join the waiting list	German Ausverkauft, auf die Warteliste
perPerson	English per person	German pro Person
program	English The evening	German Der Abend
hostedBy	English With {name}	German Mit {name}
book	English Book {n} seats for {price}	German {n} Plätze für {price} buchen
bookOne	English Book 1 seat for {price}	German 1 Platz für {price} buchen
booked	English Booked. We look forward to seeing you.	German Gebucht. Wir freuen uns auf dich.
waitlist	English Join the waiting list	German Auf die Warteliste
waitlisted	English You are on the waiting list. We write to you as soon as a seat opens up.	German Du stehst auf der Warteliste. Wir schreiben dir, sobald ein Platz frei wird.
evenings	English Evenings	German Abende
mood	English Time of day	German Tageszeit
volume	English Volume	German Lautstärke
quiet	English Quiet	German Ruhig
lively	English Lively	German Lebhaft
music	English Music	German Musik
dress	English Dress	German Kleidung
goodFor	English Good for	German Passt für
hours	English Served	German Geöffnet
groupSize	English Group size	German Gruppengröße
persons	English {n} guests	German {n} Personen
room	English Room	German Raum
fits	English Seats {min} to {max}	German {min} bis {max} Plätze
tooSmall	English From {n} guests	German Ab {n} Personen
tooBig	English Up to {n} guests	German Bis {n} Personen
menu	English Menu	German Menü
estimate	English Estimate for your group	German Schätzung für eure Gruppe
estimateNote	English Drinks are charged as consumed. We send a firm offer within a day.	German Getränke nach Verbrauch. Ein festes Angebot kommt innerhalb eines Tages.
request	English Request an offer	German Angebot anfragen
requested	English Thank you. We will send your offer within a day.	German Danke. Dein Angebot kommt innerhalb eines Tages.

Read from the source of the component.

Restaurant handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-label, aria-live and aria-valuetext, so screen readers announce purpose and state.
Uses the roles img, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Restaurant?

With aiw add @ai-website/restaurant. The command puts components/ui/restaurant.tsx into your project, the code is yours from then on. It brings along button, icon, section and motion. It needs no further npm packages.

Which variants does Restaurant have?

4 variants, Table booking, Special evenings, Atmosphere and Private dining. You pick one with the variant prop, for example variant="evenings".

Can I translate the texts of Restaurant?

Yes. Restaurant carries 45 texts of its own in English and German, such as “Day”, “Closed” and “Guests”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Restaurant?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Restaurant with aiw_components and install it with aiw_add @ai-website/restaurant. Name the variant in your prompt, for example variant="reservation", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Restaurant on a page.

Everything around the table

Restaurant

Table bookingNew in 1.2

Special eveningsNew in 1.2

AtmosphereNew in 1.2

Private diningNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with