Tensile — reformer Pilates studio template

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 and typed TypeScript SDK as Haar, Frisor, Clear Care, VOLT, NOIR Drive, Fluently and Bali Villa Rentals. 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

template-reformer.vercel.app

Source code

letsopencals/template-reformer (MIT)

Deploy to Vercel

One-click deploy

Build it with AI

classes-and-lessons reference

Tensile reformer Pilates website template on a laptop and a phone in a pale concrete reformer studio — 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 — 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 — 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 — 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 — 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 — 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 — 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

Clone and install

git clone https://github.com/letsopencals/template-reformer.git
cd template-reformer
npm install

Add your API key

Create a store in the Opencals dashboard 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) and set OPENCALS_API_KEY and AUTH_SECRET in .env.local.

Run it

npm run dev

Your classes, instructors and timetable render immediately.

Deploy

Push to your own repo and deploy to Vercel, or host anywhere Next.js runs.

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.

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:

@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 has a classes-and-lessons reference with the full pattern, including Full classes.

Live demo

Source code

Deploy to Vercel

Build it with AI

​The timetable

​The studio model

​What’s inside

​Get started

​Make it yours

The timetable

The studio model

What’s inside

Get started

Make it yours