sent here for Appetite
shape up project management dashboard template · React and HTML source
Appetiteshape up project management dashboard template
Appetite is a Next.js and Tailwind CSS shape up project management dashboard template for teams that run six-week cycles and decide what they will not build.



- 109 / 109
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
Eight routes cover the running cycle, the hill chart, a scope, the pitch queue, a shaped pitch, the betting table, workspace settings and a living component guide.
- 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 19 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
Hill chart/cycle- app-shell
- hill-ridge
- appetite-burn
- circuit-breaker
- scope-ledger
Cycle/- app-shell
- bet-index
- attention-queue
- cycle-shape
Pitches/pitches- app-shell
- pitch-queue
- shaping-lane
Pitch/pitch- app-shell
- pitch-document
- pitch-decision
Betting table/betting-table- app-shell
- betting-table
Scope/scope- app-shell
- scope-hill
- scope-tasks
- scope-history
Settings/settings- app-shell
- cycle-settings
- team-settings
Components/components- app-shell
- ui
- dashboard-layout
- overlay-gallery
- bet-index
- +16
The signature is the hill track: one curve computed from the scope fixture, drawn full-bleed as the cycle ridge, inline in every scope row, and as a single marker on a card, so the drawing can never disagree with the table beside it. The shell ships three navigation geometries behind one slot contract — a labelled sidebar, a 72px icon rail and a horizontal top bar — picked from the header and remembered per reader, because a six-week cycle is watched from a different posture in week 1 than in week 5; both editions implement it, React through its grid and the HTML edition through one attribute and a pre-paint script. The theme carries the catalog's first reusable overlay layer, written without an overlay library: dialog, typed confirmation, popover, dropdown menu, tooltip, command palette, date picker and calendar, each with Escape to close, a focus trap on modal layers, focus returned to the trigger, and the aria state the trigger owes. Beside it sit the disclosure parts the console reads with: a tablist with the full arrow-key model, a disclosure region, a semantic progress bar, a non-animated skeleton paired with a spoken loading line, and a transient message region held to one rule, that a toast never carries the only copy of a fact. Its primitive state layer ships label, description, invalid, accepted, read-only, disabled and submitting treatments over a dedicated --field-border token held to the soft band, so a recessed field surface and its label carry identification and the rest border never reads louder than hover, focus or the selected state. Working local behaviour covers search, removable filter chips, sorting with aria-sort, pagination, keyboard and pointer reorder with position announcements, a hill slider with the full arrow-key model, form validation with a focused error summary, an over-capacity block, a read-only observer projection, and two irreversible actions behind typed confirmations. The Tidemark fiction follows one product team through cycle 24: four bets, eleven scopes, forty-three tasks and a betting table for cycle 25, with every figure on every screen derived from one fixture spine. Actions are honest local previews; persistence, auth and real cycle data are buyer integration points. Light mode is a cool near-white console on white cards; dark mode is the same system on a Linear-style near-black. Familjen Grotesk, Geist and Geist Mono ship locally, every colour routes through 109 semantic tokens across two modes, both modes meet computed WCAG AA, and motion respects reduced-motion preferences. All eight routes also ship as a framework-free HTML edition, compiled to standalone documents with local fonts and vanilla JavaScript, with no build step between the download and a static host.
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. 31 frames cover them, with 12 primitives sharing the ui/* frame.
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 hill track: one curve, y = h·sin²(πx), at three sizes — a 960px full-bleed ridge on /cycle, a 112px inline track in every row that names a scope, and the same curve as a 640px pointer-and-arrow-key slider on /scope. Every marker's x is a scope's fixture hill value, so the drawing cannot disagree with the table beside it.
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.25.
Appetite
Appetite is a Next.js and Tailwind CSS shape up project management dashboard template for teams that run six-week cycles and decide what they will not build. Eight routes cover the running cycle, the hill chart, a scope, the pitch queue, a shaped pitch, the betting table, workspace settings and a living component guide.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Familjen Grotesk
- text
- Geist
- mono
- Geist Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
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
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose a new Appetite route from existing sections, with the shell, the opener rule and the one-oversized-moment rule.
- add-section/SKILL.mdGraft a new section into Appetite following the theme's own patterns
- check-quality/SKILL.mdRun Appetite's own gate
- rebrand/SKILL.mdApply a buyer's brand to Appetite by editing the token table only, with the contrast arithmetic the theme was gated on.
- src/
- theme.css109 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/8 files
- components/12 files
- ui/26 files
- fonts/3 font files, 3 licenses
- app/8 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/8 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
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.
42 components, 8 pages and 109 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 license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
activity
- v1.3.4: The listing now opens on the hill chart, with every scope on one curve.
- v1.3.3: The hill charts read on a phone, the betting table keeps its Bet it button in view at every width, pitch titles get room, and every panel header carries its mark.
- v1.3.2: The home rail now lists what needs a person as plain rows with a labelled status chip, and only a bet that is still uphill late in the cycle gets a tinted row.
- v1.3.1: The HTML edition runs on the library twins — main.js falls from 288 lines to 157 and implements no behaviour of its own
- v1.3.0: Three dashboard layout modes — sidebar, icon rail, top bar — and console density, both on the listing
- v1.2.0: Tabs, toast, skeleton, progress and disclosure join the overlay layer, and the component gallery now photographs every overlay open
- v1.1.2: Docs now cover both editions end to end: the README gained its editions section, and every skill names the HTML half of its job
- v1.1.1: Dark mode matches the source system — one teal in both modes — and field borders drop to a soft band with the surface doing the identifying
- v1.0.0 — eight-route Shape Up cycle console: the hill track, the betting table, a shaped pitch and the catalog's first reusable overlay layer
- separate Nunjucks source and framework-free HTML output for every routeplanned
- a cooldown route once buyer demand names oneplanned
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.



