tailthemes
all-access
local businessnew

Coversrestaurant website template Tailwind react

Covers is a restaurant website template for Tailwind and React, built for the agency putting a client's dining room online on a fixed fee.

both modes at 1280px
Covers – Restaurant & Dining Room home page, light mode
Covers – Restaurant & Dining Room home page, light mode
Covers – Restaurant & Dining Room home page, dark mode
lightdarkloading live preview
85 / 85
light / dark tokens
2
modes, both designed
1
DOM, rendered twice
restaurant website template tailwind reactrestaurant nextjs templatetailwind restaurant menu templatenext.js reservation website templatedining room website templatewine bar website template
$14one-time · unlimited projects
32components · every one pictured below
  • unlimited projects, client work included
  • 12 months of updates
  • 14 days, no questions
licence termsLive Preview

AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.

docs — install, use, customize
016

pages, composed from 21 sections

Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.

Its signature is the room plan: a schematic top-down drawing of the dining room computed from the theme's single fixture file, so covers, tonight's service, which tables book online and whether the accessible WC is reachable without a step are drawn rather than asserted. The plan is drawn at two scales that are exactly a factor of two apart, and the type ladder is built on the same interval, so the heading beside a doubled drawing is itself doubled. The fiction is Rivelin, a 46-cover neighbourhood dining room and wine bar on the first floor of a former cutlery works in Sheffield. Its card carries 41 items and nine wines by the glass, with a 46-character dish name, one item priced on the day and one off tonight, because a menu component that only survives six short dishes has not been tested. The palette is a near-white page with the drawing on its own chalk-blue drafting sheet and a deep olive ink, 85 tokens across light and dark, authored in OKLCH and verified pair by pair. The hero sets the working print of the plan over a photograph of the room it draws, and the photography is the theme's own: four room shots and four overhead dish plates, generated for this theme and licensed with it. Six routes ship: the home page, the card, the room, booking, visiting, and a living styleguide that renders every one of the 32 components in a labelled frame. Three things are configurable in one file and both states of each ship — the room figure as the plan or as four generated room photographs, the menu index by service or by course, and booking as a local request control or a handoff to the client's existing provider. The booking form is honest: it offers only the service windows the fixture has, greys the days the kitchen is shut, refuses a date it is closed on, switches to a snug enquiry above the largest bookable table, and hands the request to one documented adapter seam instead of faking a confirmation.

0221 + 11

sections and primitives

You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.

1 / 22

hero

src/components/hero.tsx

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

hero

src/components/hero.tsx

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

Covers restaurant website template Tailwind react — hero component at full size
1 / 22
0385

tokens, both modes

Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.

roles10 of 85

hover or tab a badge for its name and both values, enter copies

supporting45
radius
0.875rem
0.5rem

The room plan: a schematic top-down drawing of the dining room whose geometry, covers, section totals, online party cap and step-free route are all computed from the same fixture that sets the card. It recurs on /, /menus, /room and /book, at 560px in the hero and exactly 1120px on /room, so the doubling in the drawing and the doubling in the type ladder are the same interval.

every token

043

typefaces, self-hosted

Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.414.

Covers

Covers is a restaurant website template for Tailwind and React, built for the agency putting a client's dining room online on a fixed fee.

const { open, close } = useLedger("2026-03") // 0123456789

icons · lucide-react · stroke 2
13px
14px
16px
display
Young Serif
text
Work Sans
mono
DM Mono
scaleratio 1.414
  • captionAg
  • smallAg
  • bodyAg
  • leadAg
  • d1Ag
  • d2Ag
  • d3Ag
  • d4Ag
05375–1920

every width is a real render from the publish gate

Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.

home page at 1280px, light mode
Covers restaurant website template Tailwind react — home page at 1280px
1280
061

every token and every part on one page

The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.

07121

files in the zip

Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.

what unzipscovers-1.1.0.zip
  • AGENTS.mdthe theme's own rules, written for an agent
  • .claude/skills/4 skills, each one job
    • add-page/SKILL.mdCompose a new Covers route from existing sections, with an opening instrument that is not the previous route's, and register it in both editions and everywhere the pipeline reads.
    • add-section/SKILL.mdGraft a new section into Covers following the theme's own patterns
    • check-quality/SKILL.mdRun Covers' own quality gate locally
    • rebrand/SKILL.mdApply a buyer's brand to Covers
  • src/
    • theme.css85 tokens, light and dark
    • fonts.tsthe faces, wired to the type tokens
    • app/6 files
    • components/21 files
      • ui/11 files
    • assets/8 images, 1 markdown file
    • fonts/5 font files, 3 licences
  • app/6 routes, plus layout.tsx and globals.css
  • theme.jsonthe manifest: tokens, components, pages
  • html/the framework-free edition
    • dist/6 compiled routes, deploy-ready — no build step
    • src/the Nunjucks source the routes compile from
  • scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
  • README.mdquickstart
  • 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
your agent reads these first
what it runs on
next >=15 <17react >=19 <20tailwind >=4 <5HTMLlucide-reactstandard licence
install into a project you already have
$ bunx shadcn add https://tailthemes.com/r/covers.json
or run it standalone
$ unzip covers.zip && bun install && bun dev
Read this theme's AGENTS.md
084

skills your agent can run

Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.

the source

32 components, 6 pages and 85 tokens, as a Next.js project.

the kit

AGENTS.md carries the design spec. Each skill is one job written against it.

add-pageadd-sectioncheck-qualityrebrand
your agent

Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.

the new page

Built from the theme's own sections, on the same tokens and the same rhythm.

the spec travels with the code

The source is yours to run, edit and deploy.

The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.

What the standard licence covers
activity
32
components
sections + primitives
6
pages
all in the preview
last updated
v1.1.0
roadmap
  • v1.1: the white-page revision — near-white light mode, the room photograph in the hero with the plan pinned over it, seat ticks, glazing and a north point on the drawing
  • v1.0: the room-plan theme ships — six routes, both editions, the drawing on its own sheet, honest booking
  • v0.1: foundations built — the token system, the Rivelin fixture spine and the room-plan primitive
for agents

This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.

/api/themes/covers
mcpsearch_themesget_themeget_componentdownload_theme