sent here for Circuit
gym website template tailwind react · React and HTML source
Circuitgym website template Tailwind react
Circuit is a gym website template built in Tailwind and React for an independent strength-and-conditioning gym or boutique studio, and the freelancers and agencies who build sites for them.



- 71 / 71
- 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 27 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
Fourteen classes a week. Ten lines each./- masthead
- hero-sheet
- programs-overview
- membership-teaser
- coach-spotlight
- +3
This week's sheets/schedule- masthead
- week-index
- room-filter
- sheet-strip-grid
- legend
- +1
What we coach/programs- masthead
- programs-intro
- program-grid
- program-detail-band
- programs-faq
- +1
Tuesday 06:00 · Platform Room/class- masthead
- class-header
- full-sheet
- coach-note
- related-classes
- +1
Coaching staff/coaches- masthead
- coach-roster
- coach-bio-detail
- certifications-band
- footer
Membership/membership- masthead
- tier-table
- tier-detail
- policy-terms
- join-form
- +1
The parts, unassembled/components- masthead
- hero-sheet
- programs-overview
- membership-teaser
- coach-spotlight
- +22
Seven routes ship: the home slab, the weekly schedule as a compact tick-row strip, the programme grid, one class rendered at full scale, the coach roster, the membership tier table, and a living component styleguide. Its signature is the roll sheet: every class is a fixed number of ruled lines, set by the room's own hard integer capacity, filled top to bottom in booking order, with a dashed rule crossing the sheet at the session's own start time — names above it carry an arrival stamp and a checkmark, names below it carry only the stamp. rollFor() computes every line from one fixture and throws at build time on an oversold session, a membership tier booked into a room it cannot access, or a coach or room double-booked anywhere in the week, so a class cannot go live with numbers that do not add up. No day-by-week calendar grid and no to-scale floor plan appear anywhere in the theme — the roll sheet and its compact strip are the only schedule visualisations it ships. The palette is dark-first: an ink-navy primary the sheet is signed in, a turf-green accent for the room's own floor-marking paint and the checked-in mark, in a near-black room lit only by the one bright, paper-coloured sheet. Fixtures are one spine: Ashgrove Barbell Club, a strength-and-conditioning gym in a converted 1930s tram depot in Fishponds, Bristol — two rooms, three coaches, three membership tiers and fourteen sessions a week, and every number on every route resolves through the same array.
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. 36 frames cover them, with 15 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 roll sheet: every class is a fixed number of ruled lines, set by the room's own hard integer capacity, filled top to bottom in booking order. A dashed rule crosses the sheet at the session's own start time — names above it carry an arrival stamp and a checkmark, names below it carry only the stamp. rollFor() computes every line and throws at build time on an oversold session, a membership tier booked into a room it cannot access, or a coach or room double-booked anywhere in the week. It runs on /, /schedule, and /class at three escalating renderings — a count, a strip, and the full sheet.
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.333.
Circuit
Circuit is a gym website template built in Tailwind and React for an independent strength-and-conditioning gym or boutique studio, and the freelancers and agencies who build sites for them.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Barlow Condensed
- text
- Hanken Grotesk
- mono
- Space 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 Circuit route from existing sections or new ones, with an opening instrument that is not the last route's, and register it everywhere the pipeline reads.
- add-section/SKILL.mdGraft a new section into Circuit following the theme's own patterns
- check-quality/SKILL.mdRun Circuit's own quality gate locally
- rebrand/SKILL.mdApply a buyer's brand to Circuit
- src/
- theme.css71 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/7 files
- components/27 files
- ui/26 files
- assets/4 images, 1 markdown file, 1 file
- fonts/7 font files, 3 licenses
- app/7 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/7 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.
50 components, 7 pages and 71 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.0.0: First release: a gym site built around the roll sheet, seven routes, both editions, light and dark.
- v1.0.0 — seven-route gym website template built on the roll sheet: every class a fixed number of ruled lines against the room's own hard capacity, filled top to bottom in booking order, with rollFor() throwing at build time on an oversold session, a membership tier booked into a room it cannot access, or a coach or room double-booked anywhere in the week
- a second commissioned equipment photograph once the room-detail band earns a companionplanned
- a per-tier booking-platform integration once a buyer names their own scheduling backendplanned
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.


