> ## Documentation Index
> Fetch the complete documentation index at: https://opencals.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tensile — reformer Pilates studio template

> Free, open-source reformer Pilates and fitness studio website template. Next.js 15, a multi-studio weekly timetable with the instructor and beds left on every class, Full classes with the next class that has space, 1:1 and duet privates, dated workshops, live online classes with a Join button, Stripe checkout and passwordless accounts, built on the Opencals Storefront API.

A complete reformer Pilates studio website you can clone and deploy today.
Tensile is built for **class-based fitness studios**: a weekly timetable across
several studios, where every class names its instructor and shows the **beds
left** in the room, plus private sessions, workshops and live online classes.
Start here for a Pilates, yoga, barre, spin or boutique fitness studio. It runs
on the same [Storefront API](https://opencals.com/docs/api-reference/introduction.md) and typed
[TypeScript SDK](https://opencals.com/docs/guides/storefront-sdk.md) as [Haar](https://opencals.com/docs/open-source/haar.md),
[Frisor](https://opencals.com/docs/open-source/frisor.md), [Clear Care](https://opencals.com/docs/open-source/clarity.md),
[VOLT](https://opencals.com/docs/open-source/volt.md), [NOIR Drive](https://opencals.com/docs/open-source/noir.md),
[Fluently](https://opencals.com/docs/open-source/fluently.md) and
[Bali Villa Rentals](https://opencals.com/docs/open-source/bali-villas.md).

It's set in Berlin (EUR, `Europe/Berlin`) with three studios (Mitte, Kreuzberg,
Prenzlauer Berg), live online classes and eight instructors. The design is
technical but warm: pale concrete, ink and steel, with the real reformer spring
colours (green, yellow, blue, red) as the intensity scale across the site.

> **[Live demo](https://template-reformer.vercel.app)**
>
> template-reformer.vercel.app

> **[Source code](https://github.com/letsopencals/template-reformer)**
>
> letsopencals/template-reformer (MIT)

> **[Deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-reformer\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&project-name=tensile\&repository-name=template-reformer)**
>
> One-click deploy

> **[Build it with AI](https://opencals.com/docs/ai-agents/build-booking-site-skill.md)**
>
> classes-and-lessons reference

![Tensile reformer Pilates website template on a laptop and a phone in a pale concrete reformer studio](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/cover.png)

Tensile — the storefront on desktop and mobile

![Tensile template homepage hero with a reformer studio film, the three Berlin studios and a first-class call to action](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/homepage-hero.png)

Homepage hero — the studio, the week's classes and a first-class offer up front

## The timetable

One week across every studio and the online room. Each class shows its
instructor, its spring colour and a row of **bed pips** for the beds left.
Filter by studio, class, level, instructor or time of day, and share the
filtered URL. A class that's sold out reads **Full**, with a "next with space"
link to the next class of the same type that still has a bed.

![Tensile template weekly timetable with studio and class filters, bed pips on each class and a Full class pointing to the next class with space](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/timetable.png)

Timetable — the week across three studios and online, with beds left and Full classes

![Tensile template class sheet with an SVG room plan of reformer beds, add-ons, a price preview and a book button](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/class-sheet.png)

Class sheet — the room plan, extras, the price with any discount, and the policy, then on to checkout

## The studio model

This is the part worth copying even if you never ship Tensile itself. It uses
existing Opencals features only.

| Piece | How it's modelled |
| - | - |
| A class type (Reformer Flow, Foundations) | A product |
| One weekly class series | A **variant** per class × studio × instructor (`flow-mitte-lena`), with its own schedule (one window per weekly start), its studio as the only location and its instructor as the only staff member |
| Capacity | `maxAttendees` = the beds in the room. Beds left = `maxAttendees - attendees` on each slot |
| Full classes | The API drops a slot once it's full. Classes repeat weekly, so the template learns each series' weekly pattern and shows a missing week as **Full** |
| Rooms and bed plans | Template content (`lib/site-config.ts`); rooms aren't API entities |
| Privates (1:1 and duet) | One seat each, sharing one product pool per studio (one private room). A duet is one booking for two, carried as the custom attribute `people = "2"` |
| Workshops | Dated products in a `workshops` collection. A full workshop simply disappears |
| Online classes | An `ONLINE` location whose `link` is the class URL, returned on the booked appointment |
| Grip socks, towel hire, recovery shake | Add-ons |
| Waiver and pregnancy questions | Checkout questions, the waiver a required checkbox |
| Intro offer, off-peak, `TENSILE10` | An automatic 30% first-order discount, an automatic 20% discount on weekday classes starting 10:00–16:00, and a code. They don't stack: the best one wins |
| Move or cancel | `allowCustomerCancel` and reschedule with a 12-hour `cancelGap` |

## What's inside

![Tensile template privates page with 1:1 and duet sessions at each studio and their next available times](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/privates.png)

Privates — 1:1 and duet sessions per studio on live times

![Tensile template account page listing booked classes with move and cancel buttons, a Join button for an online class and a level path](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/account.png)

Your week — upcoming classes with move, cancel and Join, plus the level path

![Tensile template timetable on a mobile screen with a day strip and bed pips](https://raw.githubusercontent.com/letsopencals/template-reformer/main/docs/mobile.png)

Mobile — the timetable at phone size

| Feature | Notes |
| - | - |
| Home | Film hero, a live board of today's classes, the spring system, class types, the level path, studios, instructors, the intro offer and FAQ |
| Timetable | A week across every studio and online, filters with shareable URLs, bed pips, Full classes with "next with space", deep links to a class sheet |
| Class sheet | Room plan, extras, price preview with the best discount, policy, then a hand-over to checkout |
| Classes, studios, instructors | Class pages with what to bring and the springs used, studio pages with rooms and directions, instructor profiles with their upcoming classes |
| Privates and workshops | 1:1 and duet sessions per studio; dated Saturday workshops |
| Checkout | Customer details, the waiver and pregnancy questions, a discount code, Stripe or pay at the studio, and a check-in pass |
| Accounts | Passwordless 6-digit email login and one-time email links via `/link/[token]`; your week, move or cancel up to 12 hours before, Join for online classes, feedback, and a level path |
| Motion | Lenis smooth scrolling, a page transition, line-mask reveals and tension cables; every effect has a reduced-motion fallback |
| SEO | Per-page metadata, Open Graph, `ExerciseGym` structured data with a `SportsActivityLocation` per studio, `robots.txt`, `sitemap.xml` |
| Stack | Next.js 15, TypeScript, Tailwind v4, Framer Motion, `@opencals/storefront-sdk` v0.3.18 |

## Get started

**1. Clone and install**

```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
git clone https://github.com/letsopencals/template-reformer.git
cd template-reformer
npm install
```

**2. Add your API key**

Create a store in the [Opencals dashboard](https://opencals.com) and choose
the **Reformer Pilates Studio** dataset preset (category Pilates & fitness,
`reformer_studio`). It seeds the three studios and the online room, eight
instructors, the weekly timetable, privates, workshops, add-ons, checkout
questions with the waiver, the three discounts and sample bookings, some
of them Full. Then grab a private storefront key (`spk_`, see
[API keys](https://opencals.com/docs/authentication.md#api-keys)) and set `OPENCALS_API_KEY` and
`AUTH_SECRET` in `.env.local`.

**3. Run it**

```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
npm run dev
```

Your classes, instructors and timetable render immediately.

**4. Deploy**

Push to your own repo and
[deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-reformer\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&project-name=tensile\&repository-name=template-reformer),
or host anywhere Next.js runs.

> [!NOTE]
>
> Pages are server-rendered, so their API calls carry no browser `Origin`.
> Leave **allowed origins** empty on the key you give this template, or those
> calls are rejected.

> [!NOTE]
>
> Set **Storefront Base URL** in your dashboard (Settings → API) to your
> deployed domain. Every customer link (view, reschedule, cancel, leave
> feedback) is built as `{storefrontBaseUrl}/link/{token}`, so if it still
> points at localhost those emailed links go nowhere.

## Make it yours

MIT-licensed: rebrand it, restructure it, or use it for client work. Studio
knowledge lives in `lib/site-config.ts`: studios with their rooms and bed
plans, instructor bios, class meta (spring, level, what to bring), the level
path, policies, the off-peak window and add-on copy. Every colour and font is a
Tailwind v4 `@theme` token in `app/globals.css`:

```css theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
@theme {
  --color-plaster: #edebe6;       /* page */
  --color-ink: #121212;           /* text and primary buttons */
  --color-spring-blue: #2f5bd3;   /* strong */
  --color-spring-red: #d9412b;    /* heavy, and urgency */
}
```

Building a different class-based studio with an AI agent? The
[build-booking-site skill](https://opencals.com/docs/ai-agents/build-booking-site-skill.md) has a
`classes-and-lessons` reference with the full pattern, including Full classes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.