sent here for Covers
restaurant website template tailwind react · React and HTML source
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.
- 90 / 90
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs: install, use, customizepages, composed from 23 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Rivelin: 46 covers, drawn to scale/
- site-header
- hero
- service-tonight
- house-note
- room-summary
- +2
The card: 41 dishes, indexed by service/menus- site-header
- service-index
- card-full
- set-menus
- wine-list
- +2
The room: 46 covers across four sections/room- site-header
- room-plan
- private-hire
- access-statement
- booking-seam
- +1
Request a table, or take the snug/book- site-header
- booking-request
- booking-handoff
- booking-notes
- site-footer
Opening hours, exceptions and step-free access/visit- site-header
- arrival-plate
- week-grid
- dated-exceptions
- getting-here
- +2
The parts/components- site-header
- tokens
- ui
- site-footer
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 ground 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: two shoots, four daylight room shots with four overhead dish plates, and a second after-dark set of five that gives /visit the building from the street, the way in and the room under its own lights, all 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 37 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.
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. 27 frames cover them, with 13 primitives sharing the ui/* frame.
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.
hover or tab a badge for its name and both values, enter copies
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
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
- display
- Young Serif
- text
- Work Sans
- mono
- DM Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
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.
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.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- 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.css90 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/6 files
- components/23 files
- ui/17 files
- assets/13 images, 1 markdown file
- fonts/5 font files, 3 licenses
- 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 key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
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.
39 components, 6 pages and 90 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
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 license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v1.6.2: Request a table in the header is now quiet, dietary marks show their letter alone, and the menus opener no longer leaves a gap under the heading.
- v1.6.1 — container width and heading variant take their canonical names, and the booking frame shows its five recovery states as deterministic panes
- v1.6.0: The hours, the dated exceptions and all 41 dishes are now machine-readable — Restaurant and Menu JSON-LD derived from the same fixture the page reads, in both editions
- v1.5.0: Both editions can reach dark — the React edition gains the mode toggle it never had, and the HTML one gains the observer that kept its pressed state honest
- v1.4.0: The React edition joins its HTML edition on the library — field, form and the error summary shared across both
- v1.3.0: The plan gains a line hierarchy and stops rendering as slabs
- v1.2: the after-dark pass — /visit opens on the building from Ball Street at night and closes on the lit room with the route's first call to action, plus the three-frame arrival sequence
- 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.
