# Cutroom — Next.js Media Dashboard Template

> For teams reviewing and releasing video: a Next.js media dashboard template with a library, shared player, sequence builder, analytics and delivery. 10 routes.

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

## What's inside

- 10 pages
- 36 components
- 89 design tokens plus 89 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `app-shell`, `overview`, `filmstrip` |
| `/library` | `app-shell`, `media-library` |
| `/uploads` | `app-shell`, `upload-center` |
| `/player` | `app-shell`, `shared-player` |
| `/editor` | `app-shell`, `sequence-builder` |
| `/distribution` | `app-shell`, `distribution-workspace` |
| `/analytics` | `app-shell`, `watch-analytics` |
| `/people` | `app-shell`, `people-settings` |
| `/title` | `title-landing` |
| `/components` | `app-shell`, `tokens`, `ui`, `ui/dialog`, `ui/command-palette`, `ui/dropdown-menu`, `ui/tooltip`, `ui/toast`, `ui/tabs`, `ui/date-picker`, `ui/data-table`, `ui/skeleton`, `form-showcase`, `chart-showcase`, `distribution-workspace`, `filmstrip`, `overview`, `media-library`, `upload-center`, `shared-player`, `sequence-builder`, `watch-analytics`, `people-settings`, `title-landing` |

## Components

| Name | What it renders |
| --- | --- |
| `app-shell` | Responsive studio navigation adapted to persisted sidebar, icon rail, and top bar layouts with search, account context, system state, mode control, and page framing. |
| `overview` | Live title hero, active audience figure, operating measures, review activity, and release checklist. |
| `filmstrip` | Horizontal image-led season rail, and the frame the library browse rail is built from: the theme's continuous filmstrip signature. |
| `media-library` | Searchable, status-filtered, and deterministically sorted assets on the ordered filmstrip rail, with grid and list views behind the picker, record-specific review links, source, runtime, status, and empty states. |
| `upload-center` | Validated drag-and-drop and browse target with file type, count, and size limits; removable browser-only rows; YouTube or Vimeo URL validation; processing queue; labelled progress; and durable local states. |
| `shared-player` | Record-specific cinematic player with a shared transport clock, working seek and copy actions, timecoded frame pins, open/closed review state, comment creation, and comment resolution. |
| `sequence-builder` | Selected-clip player, inspector, draggable filmstrip, keyboard reorder controls, audio track, edit tools, and local draft state. |
| `distribution-workspace` | Four-version reel with an unavailable source, five neutral destinations, ready/review/blocked/stale and active-delivery overview, rendition matrix, central release checks, and a deterministic local queue with duplicate prevention, delivered, failure history, retry, cancel, empty, and read-only states. |
| `watch-analytics` | Watch measures, semantic Recharts area chart, source cues, audience retention table, and region ranking. |
| `form-showcase` | Review-settings form with text, select, textarea, checkbox, switch, validation, read-only, disabled, and local saved states. |
| `chart-showcase` | Five accessible Recharts patterns with semantic series tokens, redundant cues, tooltips, summaries, and loading, empty, and error states. |
| `people-settings` | Studio roster with validated local invitations, seat capacity, clipboard receipts, confirmed removal, Prime plan, security settings, and a focusable role-permission matrix. |
| `title-landing` | Full-bleed cinematic title page with player call to action, episode rail, story, format facts, and studio link. |
| `ui/button` | Circular primary, secondary, ghost, media, link, and icon controls with a pending state and an unavailable action that is a labelled non-control rather than a dead button. |
| `ui/panel` | Card panels, paired headers, and status pills with redundant text and dot cues. |
| `ui/audio-waveform` | Responsive SVG audio waveform with decoded-sample input, play progress, duration labels, and semantic review markers. |
| `ui/mode-toggle` | Local light and dark preview control that reports its state with aria-pressed and follows the root class wherever it is changed. |
| `ui/dashboard-layout` | Slot-based dashboard shell with persisted sidebar, icon rail, and top bar modes plus an accessible layout picker. |
| `ui/mobile-nav` | Narrow-viewport navigation drawer on the shared layer: Escape closes it, an outside press closes it, and focus returns to the button that opened it. |
| `ui/fields` | Semantic input, select, textarea, checkbox, and switch controls on the recessed field ground, with hover, focus-visible, valid, invalid, read-only, and disabled states. |
| `ui/progress` | Determinate progress bar whose role, value attributes, and fill width all read one number, in the action, accent, information, and neutral fills. |
| `ui/dialog` | Modal dialog over the shared layer: veil, focus trap, focus return, and a scroll lock only a modal takes. |
| `ui/confirm-dialog` | The destructive question as an alertdialog: the consequence is the accessible description and the answer that changes nothing takes focus. |
| `ui/popover` | Anchored non-modal panel measured from its trigger, flipped when the side has no room, and dismissed by Escape, an outside press, or Tab leaving it. |
| `ui/command-palette` | Modal ⌘K combobox over routes and media with arrow navigation, active-descendant wiring, and a no-match pane that keeps the query. |
| `ui/dropdown-menu` | Dropdown and labelled value menus with role=menu, roving focus, a locked row that keeps its reason out loud, both alignments, and Arrow, Home, and End keys. |
| `ui/tooltip` | Hover and keyboard-focus tooltip wired as a description, dismissed by Escape, never used as the only label. |
| `ui/toast` | Transient feedback queue and live region with positive, info, warning, and critical tones, each carrying a word and an icon. |
| `ui/tabs` | Accessible tablist with roving tabindex, arrow, Home and End keys, a disabled tab the arrows skip, a strip that scrolls sideways, and focusable panels. |
| `ui/date-picker` | Selectable month grid in a popover with full keyboard date movement and deterministic UTC arithmetic. |
| `ui/data-table` | Sortable, filterable, paginated table arranging the head, filter, and page strip parts around a scrolling table with separate no-result and empty panes. |
| `ui/skeleton` | Loading placeholders for blocks, lines, panels, and table rows, hidden from assistive technology behind one spoken pending sentence shown beside them. |
| `ui/search-input` | Filter field with a leading glyph, a screen-reader label, a polite result count, and rest, filled, no-result, and disabled conditions. |
| `ui/sort-head` | Sortable column head whose aria-sort comes from state and appears only where a comparator exists, with separate cell and control offsets. |
| `ui/pagination` | Page strip with an eliding target run, a live range sentence, and previous and next controls that disable at the ends. |
| `ui/field` | Field shell carrying the label, the required marker, and one message line in error, success, then description order, with derived aria-invalid and describedby. |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#f6f6f6` | `#090909` |
| `--foreground` | `#171717` | `#f5f5f5` |
| `--card` | `#ffffff` | `#141414` |
| `--card-foreground` | `#171717` | `#f5f5f5` |
| `--primary` | `#111111` | `#b8f34a` |
| `--primary-foreground` | `#ffffff` | `#203000` |
| `--primary-hover` | `#303030` | `#c8fb70` |
| `--primary-active` | `#171717` | `#dcffa3` |
| `--primary-soft` | `#ececea` | `#293716` |
| `--primary-border` | `#9a9a9a` | `#607b32` |
| `--secondary` | `#f1f1f1` | `#252525` |
| `--secondary-foreground` | `#171717` | `#f1f1f1` |
| `--muted` | `#ededed` | `#1f1f1f` |
| `--muted-foreground` | `#5f5f5f` | `#a3a3a3` |
| `--accent` | `#604b9e` | `#b7a8ff` |
| `--accent-foreground` | `#fffaff` | `#171222` |
| `--accent-hover` | `#4d3a84` | `#c9bdff` |
| `--accent-active` | `#3c2b6d` | `#ddd5ff` |
| `--accent-soft` | `#ddd5ed` | `#312b47` |
| `--accent-border` | `#927fba` | `#7267a1` |
| `--border` | `#d1d1d1` | `#333333` |
| `--ring` | `#111111` | `#b8f34a` |
| `--field` | `#e2e2e2` | `#0d0d0d` |
| `--field-border` | `#c8c8c8` | `#2a2a2a` |
| `--control-border` | `#8f8f8f` | `#666666` |
| `--selection` | `#dcdcdc` | `#202020` |
| `--selection-border` | `#303030` | `#5a5a5a` |
| `--selection-foreground` | `#171717` | `#f5f5f5` |
| `--scrim` | `#11150d` | `#050505` |
| `--shadow-color` | `#111111` | `#000000` |
| `--positive` | `#1f6a44` | `#6fe0a6` |
| `--positive-foreground` | `#f3fff7` | `#0b1b12` |
| `--positive-soft` | `#dff3e7` | `#143122` |
| `--positive-border` | `#8ec9a5` | `#2e7652` |
| `--warning` | `#7a4a00` | `#f2c46f` |
| `--warning-foreground` | `#fff9ed` | `#211704` |
| `--warning-soft` | `#fff0cc` | `#342712` |
| `--warning-border` | `#d5ad5d` | `#7c6030` |
| `--critical` | `#a1253e` | `#ff91a1` |
| `--critical-foreground` | `#fff6f7` | `#260a0f` |
| `--critical-soft` | `#fde3e7` | `#39171e` |
| `--critical-border` | `#df8f9d` | `#84404c` |
| `--info` | `#1f5d99` | `#8ac5ff` |
| `--info-foreground` | `#f5faff` | `#071a29` |
| `--info-soft` | `#e1effc` | `#14283a` |
| `--info-border` | `#8eb9e1` | `#396789` |
| `--chart-grid` | `#c8c8c8` | `#383838` |
| `--chart-1` | `#111111` | `#b8f34a` |
| `--chart-2` | `#604b9e` | `#b7a8ff` |
| `--chart-3` | `#767676` | `#c4c4c4` |
| `--chart-4` | `#1f6a44` | `#6fe0a6` |
| `--media-foreground` | `#f4f5ed` | `#f5f5f5` |
| `--media-muted` | `#cbd3c4` | `#d1d1d1` |
| `--media-primary` | `#b8f34a` | `#b8f34a` |
| `--media-primary-foreground` | `#11150d` | `#203000` |
| `--media-primary-hover` | `#c8fb70` | `#c8fb70` |
| `--media-primary-active` | `#dcffa3` | `#dcffa3` |
| `--radius` | `1rem` | `1rem` |
| `--radius-inner` | `0.75rem` | `0.75rem` |
| `--icon-stroke` | `2` | `2` |
| `--display-weight` | `650` | `580` |
| `--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.55` | `1.55` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.22` | `1.22` |
| `--text-d2` | `1.6875rem` | `1.6875rem` |
| `--leading-d2` | `1.16` | `1.16` |
| `--text-d3` | `clamp(1.875rem, 1.79rem + 0.38vw, 2.136rem)` | `clamp(1.875rem, 1.79rem + 0.38vw, 2.136rem)` |
| `--leading-d3` | `1.1` | `1.1` |
| `--text-d4` | `clamp(2.25rem, 2.1rem + 0.62vw, 2.563rem)` | `clamp(2.25rem, 2.1rem + 0.62vw, 2.563rem)` |
| `--leading-d4` | `1.04` | `1.04` |
| `--text-hero` | `clamp(3rem, 8vw, 7rem)` | `clamp(3rem, 8vw, 7rem)` |
| `--leading-hero` | `0.92` | `0.92` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--tracking-d2` | `-0.015em` | `-0.015em` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--tracking-d4` | `-0.025em` | `-0.025em` |
| `--tracking-hero` | `-0.05em` | `-0.05em` |
| `--tracking-label` | `0.09em` | `0.09em` |
| `--font-display` | `var(--font-cutroom-display), ui-monospace, monospace` | `var(--font-cutroom-display), ui-monospace, monospace` |
| `--font-text` | `var(--font-cutroom-text), ui-sans-serif, system-ui, sans-serif` | `var(--font-cutroom-text), ui-sans-serif, system-ui, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-display)` | `var(--font-display)` |
## Use it

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

## Links

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