docs · appetite

Appetite owner's guide

Everything from the download to your own palette, read from the files this theme ships.

1.3.4
version: 8
pages: 42
components: 109 × 2 modes
tokens: 4
workflows

from zip to running

unzip appetite-1.3.4.zip
cd appetite-1.3.4
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 8 routes, the token file, 42 components and the agent kit.

See the price

Install

Three ways in: the zip, the shadcn registry, or your agent over MCP.

the zip

The artifact is versioned and immutable, so the file you get is appetite-1.3.4.zip. Unzip it, run the four commands above, and the site is on localhost:3000.

The link arrives with your license, and stays valid for every future version.

the registry

Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/appetite/, mirroring the tree below.

Appetite is paid, so the request has to carry your license key. Put it in TAILTHEMES_LICENSE_KEY in your .env.local, then add this to components.json. The CLI expands the variable and sends the key as a header, so it never enters a URL.

{
  "registries": {
    "@tailthemes": {
      "url": "https://tailthemes.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${TAILTHEMES_LICENSE_KEY}"
      }
    }
  }
}

bunx shadcn add @tailthemes/appetite

An all-access key works on every slug. A single-theme key works on the theme it was bought for.

A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.

over mcp

Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.

the four tools

What unzips

One directory, laid out the way you would lay it out yourself.

appetite-1.3.4/

app/generated routes, one per page

globals.csstailwind, the tokens, the semantic bridge

layout.tsxapplies the theme's own faces

page.tsx/ · 4 sections

pitches/page.tsx/pitches · 3 sections

pitch/page.tsx/pitch · 3 sections

betting-table/page.tsx/betting-table · 2 sections

cycle/page.tsx/cycle · 5 sections

scope/page.tsx/scope · 4 sections

settings/page.tsx/settings · 3 sections

components/page.tsx/components · 21 sections

src/the theme, copied verbatim

app/8 pages, one file each · 8 files

components/12 sections, one file each, no cross-imports · 77 files

fonts/self-hosted woff2 with their licenses · 6 files

fonts.tswires the faces to the font tokens

theme.cssevery design decision: 109 tokens, both modes

.claude/workflows your agent can run

skills/rebrand · add-section · add-page · check-quality · 4 files

AGENTS.mdthe agent contract: invariants, file map, what never to touch

README.mdthe human quick start

theme.jsonthe manifest: pages, components, both token tables

package.jsongenerated, carrying this repo's exact versions

tsconfig.jsongenerated

next.config.tsgenerated

postcss.config.mjsgenerated

env.d.tsgenerated, so a fresh extract typechecks before first run

.gitignoregenerated

every file

app/generated routes, one per page

globals.csstailwind, the tokens, the semantic bridge

layout.tsxapplies the theme's own faces

page.tsx/ · 4 sections

pitches/page.tsx/pitches · 3 sections

pitch/page.tsx/pitch · 3 sections

betting-table/page.tsx/betting-table · 2 sections

cycle/page.tsx/cycle · 5 sections

scope/page.tsx/scope · 4 sections

settings/page.tsx/settings · 3 sections

components/page.tsx/components · 21 sections

src/the theme, copied verbatim

app/8 pages, one file each

betting-table.tsx

components.tsx

cycle.tsx

home.tsx

pitch.tsx

pitches.tsx

scope.tsx

settings.tsx

components/12 sections, one file each, no cross-imports

ui/the shared primitives

_tt/

anchor.ts

dialog.axes.ts

dialog.fixtures.ts

dialog.tsx

dropdown-menu.axes.ts

dropdown-menu.fixtures.ts

dropdown-menu.tsx

focusables.ts

hint.axes.ts

hint.fixtures.ts

hint.tsx

host.ts

ids.ts

layer.ts

layout-effect.ts

popover.axes.ts

popover.fixtures.ts

popover.tsx

presence.ts

recipe.ts

reduced-motion.ts

roving.ts

skeleton.axes.ts

skeleton.fixtures.ts

skeleton.tsx

sort-head.axes.ts

sort-head.fixtures.ts

sort-head.tsx

table-sort.ts

tabs.axes.ts

tabs.fixtures.ts

tabs.tsx

toast-queue.ts

toast.axes.ts

toast.fixtures.ts

toast.tsx

tooltip.axes.ts

tooltip.fixtures.ts

tooltip.tsx

badge.tsx

brand.tsx

button.tsx

calendar.tsx

command-palette.tsx

dashboard-layout.tsx

data.ts

dialog.tsx

disclosure.tsx

dropdown-menu.tsx

fields.tsx

hill.tsx

hint.tsx

index.ts

metric.tsx

mode-toggle.tsx

panel.tsx

popover.tsx

progress.tsx

skeleton.tsx

sort-head.tsx

table.tsx

tabs.tsx

toast.tsx

tooltip.tsx

ui.config.ts

app-shell.tsx

appetite-burn.tsx

betting-table.tsx

circuit-breaker.tsx

cycle-hill.tsx

cycle-overview.tsx

overlay-gallery.tsx

pitch-decision.tsx

pitch-document.tsx

pitch-queue.tsx

scope-detail.tsx

settings-console.tsx

fonts/self-hosted woff2 with their licenses

FamiljenGrotesk-Variable.woff2

Geist-Variable.woff2

GeistMono-Variable.woff2

OFL-FamiljenGrotesk.txt

OFL-Geist.txt

OFL-GeistMono.txt

fonts.tswires the faces to the font tokens

theme.cssevery design decision: 109 tokens, both modes

.claude/workflows your agent can run

skills/rebrand · add-section · add-page · check-quality

add-page/

SKILL.md

add-section/

SKILL.md

check-quality/

SKILL.md

rebrand/

SKILL.md

AGENTS.mdthe agent contract: invariants, file map, what never to touch

README.mdthe human quick start

theme.jsonthe manifest: pages, components, both token tables

package.jsongenerated, carrying this repo's exact versions

tsconfig.jsongenerated

next.config.tsgenerated

postcss.config.mjsgenerated

env.d.tsgenerated, so a fresh extract typechecks before first run

.gitignoregenerated

Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.

Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.

Using it

Every page is a plain component, and the tokens are scoped to one class.

the pages

/Cycle4 sections
/pitchesPitches3 sections
/pitchPitch3 sections
/betting-tableBetting table2 sections
/cycleHill chart5 sections
/scopeScope4 sections
/settingsSettings3 sections
/componentsComponents21 sections

dropping it into an existing app

Tokens are declared on .tt-appetite as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-appetite"> and everything inside picks them up.

Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.

The HTML edition

The same site again, with no framework under it.

Everything under html/ is a second, independently authored edition of the theme. html/dist/ is 8 compiled routes with local fonts and vanilla JavaScript — copy it to any static host and it is live, with no build step and no Node on the server. html/src/ is the Nunjucks source those routes compile from.

the two commands

bun run build:html recompiles html/dist/ after you change the source or the tokens. bun run preview:html serves the compiled edition locally. Both ship in the download's package.json, backed by the two files in scripts/.

One token file drives both editions, so a rebrand made in src/theme.css reaches the HTML edition the next time you run the build — dist/ carries compiled CSS and never updates by itself.

The two editions are kept in step by the publish gate: every route in the manifest must have a compiled counterpart before a version ships, so the 8 pages you saw above exist in both.

Making it yours

Tokens are the API: change the values, never the names.

the rebrand loop

Edit the values. All 109 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.

the workflows that ship inside

.claude/skills/add-page
One row before any markup:
.claude/skills/add-section
Write one line: which question does a person on this route have that this block answers? If you cannot, the block is decoration.
.claude/skills/check-quality
Run all of it. A change that skipped one of these is a change that shipped a regression the last one caught.
.claude/skills/rebrand
Appetite's whole visual system is 96 CSS variables in src/theme.css, declared twice (light block, dark block). Rebranding is an edit to those values and nothing else.

Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/appetite/ your copy has the project root instead.

For your agent

The theme brought its own rules, so nothing has to be reverse-engineered.

AGENTS.md is 548 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.

AGENTS.md, first 10 lines

# Appetite — rules for agents

A Shape Up cycle and betting-table console. Eight routes, 19 sections, 22
primitives — eight of them vendored from the repository's component library —
109 design tokens across two modes. Everything visual is a token;
everything numeric is derived from one fixture file.

Read this before changing anything. The invariants below are the contract the
theme was gated against, and breaking one is how a clean-looking edit ships a
regression.

The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.

How the catalog reads as data What a license covers Report a broken route