Grove owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.2.1
- version
- 10
- pages
- 31
- components
- 52 × 2 modes
- tokens
- 4
- workflows
unzip grove-2.2.1.zip
cd grove-2.2.1
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 10 routes, the token file, 31 components and the agent kit.
See the priceInstall
Three ways in: the zip, the shadcn registry, or your agent over MCP.
The artifact is versioned and immutable, so the file you get is grove-2.2.1.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.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/grove/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/grove.jsonGrove is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.
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 toolsWhat unzips
One directory, laid out the way you would lay it out yourself.
every file
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.
- /Home11 sections
- /pricingPricing8 sections
- /blogJournal5 sections
- /demoWalkthrough6 sections
- /month-end-guideMonth-end guide7 sections
- /signupStart free5 sections
- /loginSign in3 sections
- /contactContact6 sections
- /privacyPrivacy and terms5 sections
- /componentsThe design system21 sections
Tokens are declared on .tt-grove as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-grove"> 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.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 52 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.
- .claude/skills/add-page
A page in Grove is one file in themes/grove/src/app/ that imports sections and stacks them. No data fetching, no Next-specific APIs, no next/link or next/image — pages must render standalone and inside the marketplace preview route.
- .claude/skills/add-section
A section in Grove is one file in themes/grove/src/components/, importing nothing but ./ui/*, exporting one named component in PascalCase.
- .claude/skills/check-quality
Run all nine checks. Any failure blocks publishing.
- .claude/skills/rebrand
Grove is built so that a rebrand is a single-file edit. Every colour, the radius and the font families live in themes/grove/src/theme.css.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/grove/ 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 693 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Grove — rules for agents
Grove is a calm SaaS landing theme (Tailwind v4 / Next.js 15 / React 19). The
demo content belongs to a fictional product, **Alder** — bookkeeping, runway and
month-end for design studios of two to twenty people.
**The signature.** *The rules moved off the paper and into the ledger.* Every
row-like structure in Grove — the hero ledger's table rows, the close checklist,
the invoice list, the feed list, the summary rail, the guide's month register,
the subprocessor register on `/privacy` — is locked to one **3rem pitch** with a
hairline under it, so unrelated panels on unrelated pages line up like columns of
the same book. `ui/ground.ts` owns the number; `ruledRow` is how you use it. If a
change breaks the pitch, the change is wrong.
**The two reversals, recorded rather than erased.** 1.x shipped a generated
paper texture; measured, its surviving component was a low-frequency cloud that
dragged a quarter of the hero a token-step darker and locally inverted the
hairlines, so 2.0.0 removed it. **Do not put a raster back behind text.** 2.0.0
then drew a `repeating-linear-gradient` ruling at the pitch across every
`bg-background` section, doubled in the hero — *2.2.0 removed that too*, by
owner decision. The paper stays warm, the pitch stays locked, the visible ruling
is gone. What survived both reversals is the part that was ever structural: the
row. Two consequences carry forward —
- **No text in Grove sits on a hairline any more.** The `--border` column of the
contrast table stops being the theme's floor and becomes informational.
- **The hero lost the only structure it had**, so it gained one radial paper
wash in its place (`paperWash` in `hero.tsx`). Nine other sections lost their
ground layer and needed nothing: they already carry cards, hairline grids,
tables, or the alternating `bg-muted` band.
**The one sanctioned deviation.** `--card: #ffffff` — the single achromatic
token in a system with a declared 86° warm undertone. Grove's cards are a *lit
surface*, not printed stock: they are the only elements in the theme that carry
a shadow, and white is what "lit" means on paper. Zero deviations is a fail and
two is a fail; this is the one.
**Register**: declarative-quiet. **Motion personality**: calm — micro-feedback
and disclosures only, no entrances, no ambient moment. **Type ratio**: 1.250,
anchored at 1.5rem. **Hero archetype**: A8, asymmetric offset.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.