> ## 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.

# Gable — coworking template

> Free, open-source coworking website template. Next.js 15, six houses in Dublin, Cork and Galway, flex desks booked by the seat, studio desks, meeting rooms, phone booths, studios, event spaces and day offices, a day sheet that puts a desk, a room and a booth on one checkout with extras suggested in the gaps, built on the Opencals Storefront API.

A complete coworking website you can clone and deploy today. Gable is built for
**a network of workspaces that rent rooms and desks by the half hour**: six
houses, each with an open floor sold by the seat, its own desks, meeting rooms,
phone booths and, at some houses, a studio, an event space or a day office.
Start here for coworking, meeting-room hire, podcast or photo studios, or any
venue that rents rooms at several sites. 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), [Bali Villa Rentals](https://opencals.com/docs/open-source/bali-villas.md),
[Tensile](https://opencals.com/docs/open-source/reformer.md) and [Alba Dental](https://opencals.com/docs/open-source/alba.md).

It's set in Ireland (EUR, `Europe/Dublin`) with houses at Grand Canal Dock,
Smithfield, Portobello and Dún Laoghaire in Dublin, Shandon in Cork and the
Spanish Arch in Galway: 77 bookable spaces and 16 extras. The design is an
architect's drawing set: every section is a numbered sheet, summaries are title
blocks, booking lengths are dimension lines and booked time is hatched, in
cobalt with a marigold highlighter.

> [card] [Live demo](https://template-gable.vercel.app)
>
> template-gable.vercel.app

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

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

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

![Gable coworking website template on a laptop and a phone: the day planner with a meeting room and a flex desk on the day sheet, and the booking confirmation](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/cover.png)

Gable — the planner with a day sheet on desktop, the day sheet drawer on mobile

![Gable template live board listing six houses with free seats on the open floor and free rooms](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/free-now.png)

Free right now — seats left on every open floor and the rooms you could walk into in the next hour

## The planner

A search, not a wizard. Pick a house, a day, how long (dimension-line chips: 30
minutes to a full day for rooms, a half or full day for desks), a start time and
how many people. The results are the spaces that fit, each with its photo,
seats, kit, the price for that span, a day bar with the booked time hatched, and
"Free at 10:00", "Next free 14:30" or "23 seats free". Choose one, pick a time
and its extras, and add it to the day. Everything is in the URL, so a search
from the homepage or a space page lands exactly there.

![Gable template planner with a date strip, length chips, start times and meeting rooms with hatched day bars](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/planner-rooms.png)

The planner — meeting rooms at Dock House for six people

## The day sheet

The cart is a timeline of the day: every booking is a block between 08:00 and
20:00, with its extras, discounts, the hold timer, the total and **Check out**
always in view. A desk, a room for the 11 o'clock and a booth for the call after
go through **one checkout**. Under **Fits in your day** it suggests what the
day is missing: a desk around your meetings, a booth in the gap between two
meetings, lunch or coffee for the people in the room, a bigger room that's free
at the same time, or parking.

![Gable template planner for desks beside a day sheet with a meeting room and a flex desk](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/planner-desks.png)

The day sheet — a room and a flex desk, the first-day discount, and a parking suggestion

![Gable template confirmation drawn as an architectural section of the building with the booked spaces highlighted](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/thank-you.png)

The confirmation — a day sheet printout with a section through the house and the route from the front door

## The workspace model

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

| Piece | How it's modelled |
| - | - |
| A house | A location with its address, coordinates and opening hours |
| A meeting room, booth, studio desk, studio, event space or day office | One product variant at exactly one house, no staff and no pool, so each is its own resource |
| The open floor | One product per house with `maxAttendees` = its seats; a team books several seats with `numberOfAttendees` |
| Seats in a room | `allowGuests` with `maxGuests` = seats − 1; the booker invites the attendees, who get the calendar invite |
| A kind of space | A collection (`flex-desks`, `meeting-rooms`, `phone-booths`…), mapped to its presentation in `lib/site-config.ts` |
| Length and price | `allowCustomDuration`: 30-minute base for rooms and booths, 4 hours for desks and events; priced per base block |
| Level and kit | `Level:` and `Kit:` lines at the end of the product description |
| Availability | Every space's free ranges for the whole booking window, read once per house and cached for 60 s; seats left come from the ranges' `attendees` / `maxAttendees` |
| Coffee, lunch, a video-call camera, parking | Add-ons scoped to products and houses; per person with `maxQuantity`, per hour with `durationMultiplied` |
| A first day, `GABLETEAM`, Friday afternoons | 20% off flex desks on a first order, 15% off rooms with a code, 25% off rooms starting on Friday afternoons |
| Company, meeting name, dietary needs | Checkout questions |

## What's inside

![Gable template space page with seats, kit tags, a photo and a booking panel with a day bar and start times](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/space.png)

A space — Liffey's data sheet and the booking panel

![Gable template account page with a seven-day week board showing desk and room bookings](https://raw.githubusercontent.com/letsopencals/template-gable/main/docs/account.png)

Week plan — the account opens on the week, with every booking drawn to scale

| Feature | Notes |
| - | - |
| Home | Hero video, a query bar into the planner, Free right now, the houses, the kinds of space, extras, teams and FAQ |
| Houses | A hand-drawn location plan of Ireland, a page per house with a live board, spaces by kind, hours and getting there |
| Spaces | The catalogue filtered by kind, house, seats and kit; a page per space with its data sheet, plan locator and booking panel |
| Planner | House, day, length, start and people; results that fit with price and state; extras per space |
| Day sheet | A multi-item cart as a day timeline, hold timer, discounts, and suggestions in the gaps |
| Checkout | Details, checkout questions, a discount code, invitees for rooms, Stripe or pay at the house |
| Confirmation | A printable day sheet with a section through the house, add to calendar and invite people |
| Accounts | Passwordless 6-digit code; Week plan, change time, stay longer, invite, cancel, receipts |
| Pricing and extras | From-prices per kind, a "price a whole day" builder, and the extras catalogue |
| SEO | Per-page metadata, Open Graph, `CoworkingSpace` structured data per house, `FAQPage`, `robots.txt`, `sitemap.xml` |
| Stack | Next.js 15, TypeScript, Tailwind v4, `@opencals/storefront-sdk` v0.3.19 |

## Get started

**1. Clone and install**

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

**2. Add your API key**

Create a Dev Store in the [Opencals dashboard](https://opencals.com) with the
country set to **Ireland** (for EUR) and choose the **Gable** dataset
(`coworking`). It seeds the six houses, 77 spaces, 16 extras, the checkout
questions, three discounts and sample bookings. 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 houses, spaces and extras 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-gable\&env=OPENCALS_API_KEY,AUTH_SECRET\&envDescription=API%20key%20from%20your%20Opencals%20dashboard%20and%20a%20random%20secret%20for%20auth\&project-name=gable\&repository-name=template-gable),
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}`.

## Make it yours

MIT-licensed: rebrand it, restructure it, or use it for client work. Workspace
copy lives in `lib/site-config.ts` (the collection → kind mapping, house
photography and arrival notes, extras groups, teams, FAQ). Every colour and font
is a Tailwind v4 `@theme` token in `app/globals.css`, and `DESIGN.md` describes
the drawing-set system:

```css theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
@theme {
  --color-paper: #f6f6f2;     /* page */
  --color-ink: #121633;       /* text and frames */
  --color-cobalt: #2a44d4;    /* the brand: actions, drawings */
  --color-marigold: #f4b63f;  /* the highlighter: the one thing you chose */
}
```


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