# Circuit — Gym Website Template Tailwind React

> A gym website template tailwind react with a roll sheet that fills line by line against real room capacity, tiers gated to the rooms they cover.

- Price: $24, one-time
- License: Standard
- Version: 1.1.0
- 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

- 7 pages
- 51 components
- 71 design tokens plus 71 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `masthead`, `hero-sheet`, `programs-overview`, `membership-teaser`, `coach-spotlight`, `location-hours`, `join-cta`, `footer` |
| `/schedule` | `masthead`, `week-index`, `room-filter`, `sheet-strip-grid`, `legend`, `footer` |
| `/programs` | `masthead`, `programs-intro`, `program-grid`, `program-detail-band`, `programs-faq`, `footer` |
| `/class` | `masthead`, `class-header`, `full-sheet`, `coach-note`, `related-classes`, `footer` |
| `/coaches` | `masthead`, `coach-roster`, `coach-bio-detail`, `certifications-band`, `footer` |
| `/membership` | `masthead`, `tier-table`, `tier-detail`, `policy-terms`, `join-form`, `footer` |
| `/components` | `masthead`, `hero-sheet`, `programs-overview`, `membership-teaser`, `coach-spotlight`, `location-hours`, `join-cta`, `week-index`, `room-filter`, `sheet-strip-grid`, `legend`, `programs-intro`, `program-grid`, `program-detail-band`, `programs-faq`, `class-header`, `full-sheet`, `coach-note`, `related-classes`, `coach-roster`, `coach-bio-detail`, `certifications-band`, `tier-table`, `tier-detail`, `policy-terms`, `join-form`, `footer` |

## Components

| Name | What it renders |
| --- | --- |
| `masthead` | The site header: wordmark, primary navigation with aria-current on the open route, mode toggle, and a compact menu that closes on Escape |
| `hero-sheet` | Hero archetype A1: the H1, the CTA and its proof over a full-bleed depot plate whose eight frames advance with the reader's scroll, with the roll sheet overlaid on it live from Tuesday 06:00 Platform Room |
| `programs-overview` | Three programme cards, each led by a plate of the apparatus that class runs on, linking to /programs |
| `membership-teaser` | The three tiers at a glance over a full-bleed plate of the depot floor, room access stated plainly, linking to /membership |
| `coach-spotlight` | One coach introduced by name and role, linking to the full roster |
| `location-hours` | The depot's address, opening hours and a directions link |
| `join-cta` | One primary action naming the drop-in fee and the two membership tiers |
| `footer` | Colophon: wordmark, route links, address and hours |
| `week-index` | The opener for /schedule: a day-by-day count of sessions, no calendar grid |
| `room-filter` | Filter chips for room and class type, composing the vendored filter-chip part |
| `sheet-strip-grid` | Every session's compact tick strip for the week, filtered by room-filter's state |
| `legend` | What a filled tick, an open tick and the cutoff mean, stated once |
| `programs-intro` | The opener for /programs: what the club actually trains, in one paragraph |
| `program-grid` | The three class types — Strength, Conditioning, Mobility — with the coach and room each runs in |
| `program-detail-band` | The equipment-detail photograph naming real apparatus, as supporting content rather than a floor plan |
| `programs-faq` | Five questions a prospective member asks first, as disclosures |
| `class-header` | The opener for /class: the session's day, time, room, coach and class type |
| `full-sheet` | The oversized moment: every line of the room's capacity, named, timestamped, the dashed cutoff rule drawn, N lines left at the foot |
| `coach-note` | A line from the session's own coach on what the class covers |
| `related-classes` | Two other sessions of the same class type, as compact strips |
| `coach-roster` | The three coaches ruled like a roster: role, certifications and weekly session count |
| `coach-bio-detail` | One coach at depth — portrait, bio and the sessions she runs this week |
| `certifications-band` | Every certification held across the coaching staff, in one ruled list |
| `tier-table` | The three membership tiers as a table, room access resolved against roomAccess rather than typed twice |
| `tier-detail` | The vendored variant-selector composed as the tier picker, each option's includes and excludes shown as it is chosen |
| `policy-terms` | Cancellation, freeze and guest-pass terms, stated plainly |
| `join-form` | The enquiry form: the vendored form and form-error-summary parts composed into a five-field intake with native constraints and a receipt |
| `ui/button` | Primary, secondary and ghost variants with hover, active, pending and disabled states |
| `ui/badge` | Eyebrow, class-type chip and neutral fact tag |
| `ui/card` | The flat, bordered card every grid and roster row composes from |
| `ui/field` | Vendored library part (field): label, description, invalid and disabled states on a computed --field-border |
| `ui/select` | A native select styled to the theme's tokens, for the enquiry form's room and tier questions |
| `ui/input` | The text input recipe shared by the enquiry form's name, email and phone fields |
| `ui/checkbox` | The enquiry form's consent control, native, with a visible focus ring |
| `ui/tabs` | Vendored library part (tabs): the sheet register and coach-presentation variant switches on /components |
| `ui/accordion-disclosure` | Vendored library part (accordion-disclosure): the FAQ disclosures on /programs and the compact nav menu |
| `ui/sheet-line` | The signature primitive: one ruled row of the roll sheet, filled or open, with the cutoff's dashed rule and checkmark |
| `ui/tag` | A neutral fact tag: room name, class type, or certification |
| `ui/avatar` | A coach's generated portrait, cropped square or 3:4, with a text-initial fallback |
| `ui/nav` | The primary navigation list shared by the masthead and its compact menu |
| `ui/mode-toggle` | Light and dark flip, applied to the .tt-circuit wrapper or the document root |
| `ui/lift-sequence` | The hero's eight-frame lift, one frame visible, indexed by scroll position; CSS scroll timelines drive it where they exist and this is the fallback where they do not |
| `ui/tier-gate-badge` | A room-access indicator: which membership tiers can book a given room, resolved from roomAccess |
| `ui/inline-alert` | A neutral, positive or critical inline message, used by the enquiry form's receipt and validation summary |
| `ui/footer-nav` | The footer's route list and legal line |
| `ui/form` | Vendored library part (form): the submit flow as one panel — a busy fieldset that refuses a second send and a named receipt focus lands on, composed by join-form |
| `ui/form-error-summary` | Vendored library part (form-error-summary): the refused-answers panel, a counted heading, one link per failed field, composed by join-form |
| `ui/dialog` | Vendored library part (dialog), filled to the theme's tokens and unmounted — no shipped route needs a confirmation layer |
| `ui/tooltip` | Vendored library part (tooltip), filled to the theme's tokens and unmounted — no shipped route needs a hover disclosure |
| `ui/filter-chip` | Vendored library part (filter-chip): the applied, removable room filter on /schedule, composed by room-filter |
Showing the first 50 of 51 declared components. [The manifest JSON](https://tailthemes.com/api/themes/circuit) carries the full table.

## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#101218` | `#101218` |
| `--foreground` | `#eef0f2` | `#eef0f2` |
| `--card` | `#1b1e27` | `#1b1e27` |
| `--card-foreground` | `#eef0f2` | `#eef0f2` |
| `--secondary` | `#21242b` | `#21242b` |
| `--secondary-foreground` | `#eef0f2` | `#eef0f2` |
| `--muted` | `#1d1f26` | `#1d1f26` |
| `--muted-foreground` | `#8b939f` | `#8b939f` |
| `--border` | `#262930` | `#262930` |
| `--primary` | `#6b74c9` | `#6b74c9` |
| `--primary-foreground` | `#08090d` | `#08090d` |
| `--primary-hover` | `#7c86dd` | `#7c86dd` |
| `--primary-active` | `#8e99f1` | `#8e99f1` |
| `--accent` | `#14b34a` | `#14b34a` |
| `--accent-foreground` | `#06210f` | `#06210f` |
| `--ring` | `#eef0f2` | `#eef0f2` |
| `--field` | `#20232c` | `#20232c` |
| `--field-border` | `#7e8086` | `#7e8086` |
| `--control-border` | `#8d8f95` | `#8d8f95` |
| `--selection` | `#262a4b` | `#262a4b` |
| `--selection-foreground` | `#eef0f2` | `#eef0f2` |
| `--selection-border` | `#7079c1` | `#7079c1` |
| `--link` | `#7c86dd` | `#7c86dd` |
| `--link-hover` | `#8e99f1` | `#8e99f1` |
| `--positive` | `#53be70` | `#53be70` |
| `--positive-soft` | `#132417` | `#132417` |
| `--positive-border` | `#3f8a54` | `#3f8a54` |
| `--warning` | `#e9ab2b` | `#e9ab2b` |
| `--warning-soft` | `#271d0c` | `#271d0c` |
| `--warning-border` | `#ad7f26` | `#ad7f26` |
| `--critical` | `#fd736d` | `#fd736d` |
| `--critical-soft` | `#2f1816` | `#2f1816` |
| `--critical-border` | `#c0564f` | `#c0564f` |
| `--info` | `#68b7ed` | `#68b7ed` |
| `--info-soft` | `#15212a` | `#15212a` |
| `--info-border` | `#4c86ac` | `#4c86ac` |
| `--shadow-color` | `#05060a` | `#05060a` |
| `--sheet-paper` | `#fdf6e8` | `#fdf6e8` |
| `--sheet-paper-edge` | `#d9c9a6` | `#d9c9a6` |
| `--sheet-rule` | `#c7b898` | `#c7b898` |
| `--sheet-ink` | `#1a2247` | `#1a2247` |
| `--sheet-muted` | `#6b6455` | `#6b6455` |
| `--sheet-accent` | `#0c9c3d` | `#0c9c3d` |
| `--sheet-cutoff` | `#7d1f1f` | `#7d1f1f` |
| `--radius` | `0.375rem` | `0.375rem` |
| `--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` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--text-d2` | `2rem` | `2rem` |
| `--leading-d2` | `1.2` | `1.2` |
| `--tracking-d2` | `-0.015em` | `-0.015em` |
| `--text-d3` | `clamp(2rem, 1.6rem + 2vw, 2.6875rem)` | `clamp(2rem, 1.6rem + 2vw, 2.6875rem)` |
| `--leading-d3` | `1.15` | `1.15` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--text-d4` | `clamp(2.375rem, 1.6rem + 3.9vw, 3.5625rem)` | `clamp(2.375rem, 1.6rem + 3.9vw, 3.5625rem)` |
| `--leading-d4` | `1.1` | `1.1` |
| `--tracking-d4` | `-0.025em` | `-0.025em` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--weight-display` | `400` | `400` |
| `--font-display` | `var(--font-circuit-display), ui-sans-serif, system-ui, sans-serif` | `var(--font-circuit-display), ui-sans-serif, system-ui, sans-serif` |
| `--font-text` | `var(--font-circuit-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-circuit-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-circuit-mono), ui-monospace, 'Courier New', monospace` | `var(--font-circuit-mono), ui-monospace, 'Courier New', monospace` |
## Use it

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

## Links

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