Tare owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.0.0
- version
- 11
- pages
- 44
- components
- 86 × 2 modes
- tokens
- 4
- workflows
unzip tare-1.0.0.zip
cd tare-1.0.0
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 11 routes, the token file, 44 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 tare-1.0.0.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/tare/, mirroring the tree below.
Tare 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/tareAn 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.
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.
- /On the scale this morning6 sections
- /pricesEvery fee, by species and weight5 sections
- /animals/catsCats7 sections
- /animals/dogsDogs7 sections
- /animals/rabbits-and-small-petsRabbits and small pets7 sections
- /registerRegister your animals5 sections
- /out-of-hoursOut of hours5 sections
- /health-planThe health plan5 sections
- /teamWho will see your animal5 sections
- /when-its-timeWhen it's time6 sections
- /componentsTare's parts2 sections
Tokens are declared on .tt-tare as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-tare"> 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 11 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.
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 11 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 86 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
1. A page is composition.
- .claude/skills/add-section
1. One file, one section: src/components/<name>.tsx.
- .claude/skills/check-quality
1. The fixture checks itself.
- .claude/skills/rebrand
A rebrand touches these files and no section component:
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/tare/ 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 726 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Tare — agent rules
Tare is a veterinary practice website for Next.js and Tailwind v4, in light and
dark, in React (`src/`) and plain HTML (`html/src/`). Every animal on it is
**weighed in**: photographed from one fixed camera, standing on one long
waiting-room scale whose graphite edge carries its reading in kg, with a ticket
under it naming the fee band that weight buys. The fee list is published in
full by species and weight band, a household registers all its animals in one
form, the out-of-hours page names the partner practice, and an end-of-life page
says what happens and what it costs. **It ships no backend**: the two forms post
to `NEXT_PUBLIC_REGISTER_ENDPOINT` and `NEXT_PUBLIC_REPEAT_ENDPOINT` (§ Endpoints),
and until those are set every receipt opens "Not sent".
Read this file before changing anything. The rules are short because the theme
is narrow: one device, one green, one fee list.
## The fiction
Low Fellside Vets, an independent small-animal practice on Low Fellside,
Kendal, Cumbria: three vets, two registered nurses and a receptionist, owned by
its principal. Invented practice, real street, no house number. Phone
01632 960583 (Ofcom's drama range). Nights and weekends go to Lakeland Animal
Emergency in Penrith, 01632 960777. GBP, `Europe/London`. The fixture spine is
`src/fixtures/low-fellside.ts`; every figure on every page is a value written
there or a derivation of one in `src/fixtures/derive.ts`.
**Confirm in writing before launch** (`/when-its-time` promises them):
`CREMATORIUM.name` is a rebrand slot whose demo value, Lune Valley Pet
Crematorium, is invented; put the practice's crematorium in and confirm with
it, in writing, what it does with communal ashes and how long individual
ashes take to come back, because the cremation rows say so. `BEREAVEMENT_LINE`
is a real charity's public number (Blue Cross Pet Bereavement Support); check
it is current. Every other line in `END_OF_LIFE` is the practice's policy in
its own words: edit it there, never in a component.
**Register (`/content-pass`)**: plain and unhurried, the desk talking to an
owner. H1s run 9 to 12 words (the 1.250 ratio's budget); a helper line is one
clause. No adjective of comfort, no "furry family", no "call for prices". On
`/when-its-time` the word "euthanasia" is said in the H1 and the lede and never
softened; "overdose of anaesthetic" and "reflexes" are said as they are.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.