CutroomNext.js media dashboard template
A media management dashboard template for Next.js teams that need footage, reviews, edits, audience data, and publishing in one image-led workspace.
- 85 / 85
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 12 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Overview/
- app-shell
- overview
- filmstrip
Media library/library- app-shell
- media-library
Uploads/uploads- app-shell
- upload-center
Shared player/player- app-shell
- shared-player
Sequence builder/editor- app-shell
- sequence-builder
Watch analytics/analytics- app-shell
- watch-analytics
People and plan/people- app-shell
- people-settings
Afterlight/title- title-landing
Components/components- app-shell
- tokens
- ui
- form-showcase
- chart-showcase
- +9
Cutroom ships nine routes for an operations overview, searchable media library, upload queue, remote video links, shared player, timecoded comments, reel sequence builder, watch analytics, studio accounts, a cinematic title landing page, and a living component guide. Its reusable dashboard shell switches between sidebar, icon rail, and top bar layouts while preserving the same navigation and product controls. The component guide includes complete form states and five accessible Recharts patterns. The Northline Pictures fiction follows five films in the Afterlight anthology through source upload, review, trailer assembly, and release. The continuous filmstrip is the signature: one ordered row of frames becomes the browse rail, player timeline, and sequence canvas. Controls work as honest frontend previews, including search, status filters, card shuffling, grid and list modes, local uploads, linked-source feedback, playback state, comment creation and resolution, clip selection, pointer drag, keyboard reordering, draft saves, member invitations, and billing notices. Storage, transcoding, streaming, auth, billing, analytics ingestion, and persistence remain buyer integration points. Five original cinematic stills, two self-hosted OFL variable fonts, Lucide icons, Recharts analytics, complete light and dark token tables, computed WCAG AA pairs, visible focus, and reduced motion ship in the runnable project.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
app-shell
src/components/app-shell.tsx
Responsive studio navigation adapted to persisted sidebar, icon rail, and top bar layouts with search, account context, system state, mode control, and page framing.
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The continuous filmstrip: one ordered row of frames becomes the library browse rail, review timeline, and sequence builder
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.125.
Cutroom
A media management dashboard template for Next.js teams that need footage, reviews, edits, audience data, and publishing in one image-led workspace.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Red Hat Mono
- text
- Schibsted Grotesk
- mono
- Red Hat Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- heroAg
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
files in the zip
A runnable Next.js project, and the instructions an agent reads before it changes anything in it. Unzip and run it, or install it into a project you already have.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose a Cutroom route from existing media surfaces without breaking navigation, filmstrip, heading, fixture, or frontend-honesty contracts.
- add-section/SKILL.mdAdd a self-contained Cutroom media surface with semantic tokens, complete states, manifest wiring, and component-guide coverage.
- check-quality/SKILL.mdVerify Cutroom's tokens, imagery, media fixtures, interactions, accessibility, captures, types, build, registry, and buyer package.
- rebrand/SKILL.mdRebrand Cutroom through its dark cinema tokens while preserving contrast, status semantics, and the continuous filmstrip.
- src/
- theme.css85 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/9 files
- components/13 files
- ui/7 files
- assets/5 images, 1 markdown file
- fonts/2 licences, 2 font files
- app/9 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
20 components, 9 pages and 85 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard licence coversactivity
- v1.1: Three dashboard layouts, complete form states and five Recharts patternstoday
- v1.0: Nine-route media operations theme with shared review, sequencing, analytics, accounts and a cinematic title pagetoday
- connect storage and transcoding to a buyer media backendplanned
- add subtitle language management when buyer demand supports itplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
