# Covers — Restaurant Website Template Tailwind React

> For the agency putting a client's dining room online: a restaurant website template tailwind react with menus, a booking request and the room drawn to scale.

- Price: $14, one-time
- License: Standard
- Version: 1.6.2
- Category: Local business
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15 <17, React >=19 <20, Tailwind CSS >=4 <5
- Dependencies: `lucide-react`

## What's inside

- 6 pages
- 39 components
- 90 design tokens plus 90 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero`, `service-tonight`, `house-note`, `room-summary`, `booking-seam`, `site-footer` |
| `/menus` | `site-header`, `service-index`, `card-full`, `set-menus`, `wine-list`, `suppliers-note`, `site-footer` |
| `/room` | `site-header`, `room-plan`, `private-hire`, `access-statement`, `booking-seam`, `site-footer` |
| `/book` | `site-header`, `booking-request`, `booking-handoff`, `booking-notes`, `site-footer` |
| `/visit` | `site-header`, `arrival-plate`, `week-grid`, `dated-exceptions`, `getting-here`, `night-table`, `site-footer` |
| `/components` | `site-header`, `tokens`, `ui`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Masthead with the brand mark, four nav routes in the order that keeps the two plan openers non-consecutive, tonight's service read from the fixture, the primary booking action, a native details disclosure below lg and the skip link |
| `site-footer` | Address, phone, the four services with their derived day ranges and hours, the closed day computed from the services array, route links and the type colophon, on the sunken recess |
| `hero` | Hero archetype A5, hard 50/50: the room stated plainly beside the window photograph with the working print of the plan pinned over its lower corner, marked for tonight's service, with covers by section, the online party cap and one primary action |
| `service-tonight` | Six dishes from tonight's own card sections chosen by rule, beside a service card carrying hours, last seating, dish count and what is off tonight, on a 7/5 split |
| `house-note` | The story band that carries the cut /about route: three paragraphs in the house register with the floor area and the set-menu reduction derived, prose measure on a full-bleed sunken field |
| `room-summary` | The four room sections as hairline-ruled rows with covers, table count and whether each books online, beside the access and private-hire facts, on an 8/4 split |
| `booking-seam` | The closing action with cost, risk and effort answered beside it, the next service and the phone number for a party over the online cap |
| `service-index` | Variant axis 2: the four-band service strip running to both gutters with days, hours, dish count and covers per band, or the same strip inverted to five course columns |
| `card-full` | The whole card — 41 items across five sections on a 46ch measure — beside an aside naming what is new, what is off and what is priced on the day, on a 7/5 split |
| `set-menus` | Three set menus whose per-head prices are summed from the card and reduced once, on the sunken recess; a composed item priced on the day throws rather than guessing |
| `wine-list` | Nine wines by the glass grouped by colour with tabular glass and bottle prices, the one surface in the theme where figures are compared down a column |
| `suppliers-note` | The sourcing footnote that carries the cut /story route, at the prose measure |
| `room-plan` | The plan at exactly 1120px — twice the hero's 560 — beside a d4 heading that is twice the hero's d2, with capacity by section and a key to the drawing on an 8/4 split |
| `private-hire` | Seated, standing and minimum-spend figures for the snug beside its four-course menu at a price computed from the card, on a 7/5 split |
| `access-statement` | The plan's access facts written out — entrance, the 120mm step and its rise, the accessible WC and the step-free route — each generated from the same room feature the drawing uses |
| `booking-request` | Variant axis 3 plus deterministic invalid, closed-day, dated-exception, over-cap enquiry and seam-receipt panes, all derived from the fixture; submitting stays dropped until onSubmit is wired |
| `booking-handoff` | Variant axis 3, second state: the room's own hours and online cap stated first, then a link out to the client's booking provider, with no client JavaScript |
| `booking-notes` | The five questions asked before the form is sent — party size, wheelchair access, allergies, closed dates and the phone — answered on the same page, on the sunken recess |
| `arrival-plate` | The after-dark opening band on /visit: the building from Ball Street at night running to both gutters, with tonight's service, the postcode and the entrance read from the fixture on an opaque plate pinned over its lower edge |
| `night-table` | The closing band on /visit: the room under its own lights running to both gutters, with the service hours, last seating and off-tonight count derived, and the route's one primary action beside them |
| `week-grid` | Seven day columns run to the gutters with every service laid against a derived time axis, closed days struck through and named, scrolling inside its own frame below lg, on a 9/3 split |
| `dated-exceptions` | The four dated exceptions to the weekly pattern, each striking through what the grid draws and printing what actually runs, from the same array the booking form reads |
| `getting-here` | Address, phone, email and four travel notes from the fixture, beside the 400px plan with its step-free route overlay on a 7/5 split, closing on the three-frame arrival sequence with the door's line read from the entrance feature |
| `ui/plan` | The signature: a schematic top-down plan of the dining room, geometry computed from the room fixture, with service marking, party filtering, bookability, capacity labels, private-hire highlight and the step-free route as composable overlays, at 400, 560 and 1120px, with reversed labels on marked tables and a reduced label set below lg |
| `ui/room-figure` | Variant axis 1: the same slot rendered as the drawn plan or as the four room photographs with their capacity annotations on full-opacity card plates, both reading the same room fixture |
| `ui/button` | Primary, plate and quiet variants with hover, active, pressed, pending and disabled states on the computed lightness ramp |
| `ui/field` | Label, a persistent description, the native control and one message line whose ids and precedence the library derives; the description keeps its place behind the error rather than being written over by it, and the message pairs a glyph with its ink at every verdict |
| `ui/item` | The item unit: dish name in the display face, ingredient line in italic, the figure riding the end of that line in tabular mono and never in a price column, with diet marks and the off-tonight and new-this-week states, on a 46ch measure |
| `ui/badge` | Eyebrow, diet mark (its short code and its accessible name, no glyph), item mark (off tonight, new this week), status mark and neutral fact tag, each with a word beside the colour |
| `ui/section-heading` | Eyebrow, heading and lede as one stack at three display variants, with a sunken surface policy that lifts supporting copy to --foreground |
| `ui/container` | The page's three measures — default, prose and full — so a page can put two of them beside each other |
| `ui/logo` | The brand mark: the plan's own floorplate with its cut corner and one table, on the drawing's hairline language |
| `ui/type` | The 1.414 type ladder and the shared display, mono, numeral, radius, focus and transition class strings |
| `ui/plate` | The information card wearing the drawing's conventions: a thick-thin head rule and a mono title row with one derived figure, over hairline-divided body rows. |
| `ui/form` | The submit flow the booking control runs on: constraint attributes the browser still reads with the script off, one sentence per control per constraint, more than one refusal sent to the summary and exactly one straight to that control, and a receipt that exists before focus is moved to it |
| `ui/form-error-summary` | The critical panel a refused submit lands on, inserted rather than revealed: it counts the answers still needed in words and gives each one a row that names the field, says what is wrong with it and jumps to the control |
| `ui/accordion-disclosure` | Two designs on one native details element — the question row with its marker leading and its words in the display face, and the masthead's compact nav panel — both gaining the row the element does not give: Escape from inside collapses the panel and puts focus back on its summary |
| `ui/mode-toggle` | Light and dark from inside the theme, in both editions: the root resolved as the nearest theme scope so an embedded preview is never overruled, a MutationObserver keeping aria-pressed honest when the host flips the mode, both mode classes swapped together, and one accessible name that never contradicts itself |
| `ui/structured-data` | Restaurant and Menu JSON-LD derived from the same fixture the visible page reads — the address, four services as opening-hours entries, four dated exceptions as special-hours overrides including the closed days, and all 41 card items with their prices and dietary marks. No ratings, no invented coordinates, no FAQ markup, and no reservation action while booking is a request |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#e9eff3` | `#121f27` |
| `--foreground` | `#0d1b24` | `#dfeaf0` |
| `--card` | `#ffffff` | `#213039` |
| `--card-foreground` | `#0d1b24` | `#dfeaf0` |
| `--surface-sunken` | `#d8e2ea` | `#060d12` |
| `--surface-raised` | `#ffffff` | `#2a3b45` |
| `--surface-overlay` | `#ffffff` | `#2d3f48` |
| `--shadow-color` | `#0b1217` | `#030608` |
| `--primary` | `#383800` | `#c0c251` |
| `--primary-foreground` | `#ffffff` | `#121f27` |
| `--primary-hover` | `#282900` | `#d4d65b` |
| `--primary-active` | `#1a1a00` | `#e6e988` |
| `--primary-tone` | `#595901` | `#979828` |
| `--secondary` | `#d9e5ec` | `#2c3d47` |
| `--secondary-foreground` | `#0d1b24` | `#dfeaf0` |
| `--secondary-hover` | `#cbdae4` | `#354955` |
| `--secondary-active` | `#bdd0dc` | `#3f5563` |
| `--muted` | `#e0e9ee` | `#2b3a44` |
| `--muted-foreground` | `#303f49` | `#9dacb5` |
| `--accent` | `#6f1a5d` | `#d78bc1` |
| `--accent-foreground` | `#ffffff` | `#121f27` |
| `--accent-tone` | `#8f2c79` | `#d78bc1` |
| `--border` | `#b4c5d0` | `#344652` |
| `--border-strong` | `#5c7080` | `#6e8290` |
| `--ring` | `#383800` | `#c0c251` |
| `--field` | `#ffffff` | `#090f13` |
| `--field-border` | `#9fb4c1` | `#3c505d` |
| `--control-border` | `#526879` | `#788c9a` |
| `--selection` | `#e8d3e2` | `#3d2338` |
| `--selection-foreground` | `#0d1b24` | `#dfeaf0` |
| `--selection-border` | `#8f2c79` | `#d78bc1` |
| `--link` | `#6f1a5d` | `#d78bc1` |
| `--link-hover` | `#5d024c` | `#eb9ed4` |
| `--positive` | `#004a24` | `#6dc88f` |
| `--positive-foreground` | `#ffffff` | `#062012` |
| `--positive-soft` | `#cfe6d8` | `#14301f` |
| `--positive-border` | `#4a7a5c` | `#4a8a63` |
| `--warning` | `#5d3500` | `#eaad64` |
| `--warning-foreground` | `#ffffff` | `#241500` |
| `--warning-soft` | `#f2e2c8` | `#37260f` |
| `--warning-border` | `#8a6a35` | `#96702f` |
| `--critical` | `#6d0b12` | `#ed756e` |
| `--critical-foreground` | `#ffffff` | `#2a0705` |
| `--critical-soft` | `#f3d7d6` | `#3f1a18` |
| `--critical-border` | `#a1564f` | `#b05d55` |
| `--info` | `#1a3f78` | `#8fb4ee` |
| `--info-foreground` | `#ffffff` | `#0a1932` |
| `--info-soft` | `#d8e2f3` | `#182a40` |
| `--info-border` | `#5673a5` | `#5c80b5` |
| `--plan-ink` | `#7792a3` | `#7d919e` |
| `--plan-grid` | `#b7cad7` | `#1b2830` |
| `--plan-structure` | `#2c3d49` | `#c4d2da` |
| `--plan-paper` | `#e8eff4` | `#101c25` |
| `--plan-field` | `#d3e0e9` | `#060d12` |
| `--plan-mark` | `#2f3e49` | `#c4d2da` |
| `--plan-mark-soft` | `#9db7c7` | `#293a45` |
| `--plan-route` | `#8f2c79` | `#d78bc1` |
| `--plan-label` | `#303f49` | `#9dacb5` |
| `--plan-stroke` | `1px` | `1px` |
| `--weight-display` | `400` | `400` |
| `--weight-plan-label` | `500` | `400` |
| `--tracking-d1` | `-0.01em` | `-0.005em` |
| `--tracking-d2` | `-0.01em` | `-0.005em` |
| `--tracking-d3` | `-0.02em` | `-0.015em` |
| `--tracking-d4` | `-0.025em` | `-0.02em` |
| `--radius` | `0.875rem` | `0.875rem` |
| `--radius-inner` | `0.5rem` | `0.5rem` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--text-d2` | `2.121rem` | `2.121rem` |
| `--leading-d2` | `1.16` | `1.16` |
| `--text-d3` | `clamp(2.121rem, 1.757rem + 1.554vw, 3rem)` | `clamp(2.121rem, 1.757rem + 1.554vw, 3rem)` |
| `--leading-d3` | `1.1` | `1.1` |
| `--text-d4` | `clamp(2.625rem, 1.954rem + 2.861vw, 4.243rem)` | `clamp(2.625rem, 1.954rem + 2.861vw, 4.243rem)` |
| `--leading-d4` | `1.05` | `1.05` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--font-display` | `var(--font-covers-display), ui-serif, Georgia, serif` | `var(--font-covers-display), ui-serif, Georgia, serif` |
| `--font-text` | `var(--font-covers-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-covers-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-covers-mono), ui-monospace, 'Courier New', monospace` | `var(--font-covers-mono), ui-monospace, 'Courier New', monospace` |
| `--plan-mark-live` | `#595901` | `#979828` |
| `--plan-live-soft` | `#cfcf9a` | `#3d3d10` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/covers.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/covers](https://tailthemes.com/api/download/covers)

## Links

- Product page: [https://tailthemes.com/themes/covers](https://tailthemes.com/themes/covers)
- Live preview: [https://tailthemes.com/preview/covers](https://tailthemes.com/preview/covers)
- Docs: [https://tailthemes.com/docs/covers](https://tailthemes.com/docs/covers)
- Manifest JSON: [https://tailthemes.com/api/themes/covers](https://tailthemes.com/api/themes/covers)
- Registry item: [https://tailthemes.com/r/covers.json](https://tailthemes.com/r/covers.json)