# Greenroom — Events Calendar Dashboard Template

> An events calendar dashboard template with month, week and agenda views, a keyboard-complete calendar, and 7 routes over one fixture spine.

- Price: $39, one-time
- License: Standard
- Version: 1.0.0
- Category: Dashboard
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15, React >=19, Tailwind CSS >=4
- Dependencies: `lucide-react`, `recharts`

## What's inside

- 7 pages
- 20 components
- 128 design tokens plus 128 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `app-shell`, `schedule`, `today-rail` |
| `/week` | `app-shell`, `schedule` |
| `/event` | `app-shell`, `event-detail`, `hold-ledger` |
| `/holds` | `app-shell`, `holds-queue` |
| `/new` | `app-shell`, `booking-form` |
| `/programme` | `app-shell`, `strand-list` |
| `/components` | `app-shell` |

## Components

| Name | What it renders |
| --- | --- |
| `app-shell` | Sidebar navigation, strand legend, page heading and footer |
| `booking-dialog` | A modal booking entry that reuses the complete form state layer |
| `booking-form` | The place-a-booking form and its whole state layer |
| `event-detail` | One show: status, capacity, promoter and what is missing |
| `event-panel` | A right-hand event sheet combining booking facts with the hold ledger |
| `hold-ledger` | One event's holds as rows — load-in, doors, curfew, strike |
| `holds-queue` | The date-ordered pencil queue with strand filters and recovery states |
| `load-chart` | Held room hours by week and strand, with a matching data table |
| `schedule` | The season in month, week or agenda view, with every hold drawn |
| `strand-list` | The six programme strands, their counts and their rooms |
| `today-rail` | Tonight's run order: doors, room, sold, and the hours held |
| `ui/accordion-disclosure` | Greenroom's programme and mobile-navigation disclosure recipe |
| `ui/chart` | Chart frame, strand patterns and accessible table helpers |
| `ui/dashboard-layout` | Shell geometry: sidebar, rail, topbar, header, footer |
| `ui/dates` | The theme's date and time words — no Intl, no clock |
| `ui/dialog` | Greenroom's modal recipe for booking entry and hold release |
| `ui/event-calendar` | tt-ui event calendar — month, week and agenda |
| `ui/sheet-drawer` | Greenroom's right-edge recipe for calendar event inspection |
| `ui/strand-icon` | The six programme strands mapped to named Lucide icons |
| `ui/ui.config` | Layer host, density, motion and focus decisions shared by library recipes |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#f9e3f7` | `#1d111c` |
| `--foreground` | `#291927` | `#f6edf5` |
| `--card` | `#fffcff` | `#291b27` |
| `--card-foreground` | `#291927` | `#f6edf5` |
| `--surface-sunken` | `#f0d6ed` | `#150a14` |
| `--surface-raised` | `#ffffff` | `#332432` |
| `--surface-overlay` | `#ffffff` | `#3c2b3a` |
| `--overlay-border` | `#91808f` | `#7f6e7d` |
| `--muted` | `#f8ecf6` | `#30222f` |
| `--muted-foreground` | `#6b5a69` | `#b2a4b1` |
| `--secondary` | `#f8ecf7` | `#352633` |
| `--secondary-foreground` | `#392637` | `#f2e7f0` |
| `--secondary-hover` | `#f1e0ef` | `#3c2f3b` |
| `--secondary-active` | `#e9d8e7` | `#443743` |
| `--border` | `#d7c6d5` | `#443542` |
| `--border-strong` | `#91808f` | `#7f6e7d` |
| `--shadow-color` | `#3a1f37` | `#000000` |
| `--scrim` | `#2a1628` | `#0d0710` |
| `--nav` | `#f9f0f8` | `#261924` |
| `--nav-foreground` | `#291927` | `#f6edf5` |
| `--nav-muted` | `#6b5a69` | `#b2a4b1` |
| `--nav-hover` | `#f5e6f3` | `#312630` |
| `--nav-selected` | `#ffffff` | `#3d2d3b` |
| `--nav-selected-foreground` | `#712482` | `#f2b9ff` |
| `--nav-border` | `#dccbda` | `#433542` |
| `--primary` | `#7e4d8a` | `#925d9e` |
| `--primary-foreground` | `#fefafe` | `#fefafe` |
| `--primary-hover` | `#713d7c` | `#834e8f` |
| `--primary-active` | `#632d6f` | `#753e81` |
| `--primary-soft` | `#f9e5fe` | `#3e2843` |
| `--primary-border` | `#eacbf1` | `#563d5c` |
| `--primary-ink` | `#7c298e` | `#f2b9ff` |
| `--accent` | `#e39a07` | `#feb43a` |
| `--accent-foreground` | `#2d1b00` | `#281600` |
| `--accent-hover` | `#efac44` | `#ffca80` |
| `--accent-active` | `#f8bf6c` | `#ffdbab` |
| `--accent-soft` | `#ffedd6` | `#3c2a0e` |
| `--accent-border` | `#f3d6af` | `#5b4320` |
| `--field` | `#f6f1f5` | `#170c16` |
| `--field-border` | `#e5d2e3` | `#473745` |
| `--control` | `#fceffa` | `#312830` |
| `--control-border` | `#d6c4d4` | `#51424f` |
| `--control-hover` | `#f5e6f3` | `#3a2f39` |
| `--control-active` | `#edddeb` | `#433641` |
| `--ring` | `#a23db8` | `#e98dfe` |
| `--selection` | `#f8daff` | `#492a50` |
| `--selection-foreground` | `#3a1941` | `#f8e8fb` |
| `--selection-border` | `#b774c7` | `#ab68ba` |
| `--link` | `#794db6` | `#c4a3ff` |
| `--link-hover` | `#5c2f95` | `#dbcafe` |
| `--link-visited` | `#775386` | `#c49dd5` |
| `--info` | `#0465af` | `#6ab3fd` |
| `--info-foreground` | `#fafcfe` | `#0a0e11` |
| `--info-soft` | `#e3f0fe` | `#192d41` |
| `--info-border` | `#bddbfb` | `#304a64` |
| `--info-fill` | `#0465af` | `#6ab3fd` |
| `--positive` | `#067132` | `#6fd087` |
| `--positive-foreground` | `#f7fef8` | `#0a0f0b` |
| `--positive-soft` | `#dff6e2` | `#1a321f` |
| `--positive-border` | `#bfe2c5` | `#315038` |
| `--positive-fill` | `#067132` | `#6fd087` |
| `--warning` | `#8a5601` | `#ffb250` |
| `--warning-foreground` | `#fffbf7` | `#100d09` |
| `--warning-soft` | `#feebd6` | `#3a2710` |
| `--warning-border` | `#f0d2b1` | `#5b4225` |
| `--warning-fill` | `#8a5601` | `#ffb250` |
| `--critical` | `#ac262a` | `#fd736d` |
| `--critical-foreground` | `#fefbfa` | `#110c0b` |
| `--critical-soft` | `#fee9e6` | `#3f2220` |
| `--critical-border` | `#facac5` | `#623c39` |
| `--critical-fill` | `#ac262a` | `#fd736d` |
| `--strand-live` | `#ffd2ca` | `#602018` |
| `--strand-live-ink` | `#902014` | `#febfb4` |
| `--strand-live-mark` | `#c13e2e` | `#ff806d` |
| `--strand-workshop` | `#fcd89d` | `#4b3300` |
| `--strand-workshop-ink` | `#694900` | `#ffc763` |
| `--strand-workshop-mark` | `#946900` | `#dc9e08` |
| `--strand-matinee` | `#c1edb7` | `#18430d` |
| `--strand-matinee-ink` | `#196100` | `#9ee78e` |
| `--strand-matinee-mark` | `#2d8810` | `#70c35d` |
| `--strand-community` | `#98f0ef` | `#004141` |
| `--strand-community-ink` | `#015c5c` | `#2eeded` |
| `--strand-community-mark` | `#058282` | `#0cc3c3` |
| `--strand-rehearsal` | `#c3e2fe` | `#003b61` |
| `--strand-rehearsal-ink` | `#005486` | `#a9d7fe` |
| `--strand-rehearsal-mark` | `#0177bc` | `#51b3fe` |
| `--strand-hire` | `#ddd9fe` | `#382d65` |
| `--strand-hire-ink` | `#523a9a` | `#d0cafe` |
| `--strand-hire-mark` | `#735acc` | `#aa9afe` |
| `--hold-line` | `#917d8f` | `#9f8b9d` |
| `--hold-field` | `#fdeefb` | `#221821` |
| `--radius-sm` | `0.375rem` | `0.375rem` |
| `--radius` | `1rem` | `1rem` |
| `--radius-lg` | `1.25rem` | `1.25rem` |
| `--radius-xl` | `1.75rem` | `1.75rem` |
| `--radius-pill` | `999px` | `999px` |
| `--shadow-raised` | `0 1px 2px -1px color-mix(in oklab, var(--shadow-color) 14%, transparent), 0 3px 8px -2px color-mix(in oklab, var(--shadow-color) 10%, transparent)` | `0 1px 2px -1px color-mix(in oklab, var(--shadow-color) 14%, transparent), 0 3px 8px -2px color-mix(in oklab, var(--shadow-color) 10%, transparent)` |
| `--shadow-overlay` | `0 8px 24px -6px color-mix(in oklab, var(--shadow-color) 22%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--shadow-color) 14%, transparent)` | `0 8px 24px -6px color-mix(in oklab, var(--shadow-color) 22%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--shadow-color) 14%, transparent)` |
| `--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` |
| `--text-d2` | `2rem` | `2rem` |
| `--leading-d2` | `1.2` | `1.2` |
| `--text-d3` | `clamp(2rem, 1.42rem + 2.46vw, 2.664rem)` | `clamp(2rem, 1.42rem + 2.46vw, 2.664rem)` |
| `--leading-d3` | `1.15` | `1.15` |
| `--text-d4` | `clamp(2.664rem, 1.56rem + 4.71vw, 3.551rem)` | `clamp(2.664rem, 1.56rem + 4.71vw, 3.551rem)` |
| `--leading-d4` | `1.1` | `1.1` |
| `--tracking-d1` | `-0.010em` | `-0.010em` |
| `--tracking-d2` | `-0.016em` | `-0.016em` |
| `--tracking-d3` | `-0.020em` | `-0.020em` |
| `--tracking-d4` | `-0.024em` | `-0.024em` |
| `--tracking-label` | `0.06em` | `0.06em` |
| `--font-display` | `var(--font-greenroom-display), ui-sans-serif, system-ui, sans-serif` | `var(--font-greenroom-display), ui-sans-serif, system-ui, sans-serif` |
| `--font-text` | `var(--font-greenroom-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-greenroom-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-greenroom-mono), ui-monospace, monospace` | `var(--font-greenroom-mono), ui-monospace, monospace` |
| `--display-weight` | `700` | `700` |
| `--duration-quick` | `120ms` | `120ms` |
| `--duration-settle` | `180ms` | `180ms` |
| `--ease-buoyant` | `cubic-bezier(0.34, 1.4, 0.5, 1)` | `cubic-bezier(0.34, 1.4, 0.5, 1)` |
| `--ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | `cubic-bezier(0.2, 0, 0, 1)` |
## Use it

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

## Links

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