docs · quadrant

Quadrant owner's guide

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

1.0.0
version: 15
pages: 47
components: 83 × 2 modes
tokens: 4
workflows

from zip to running

unzip quadrant-1.0.0.zip
cd quadrant-1.0.0
bun install
bun dev

The download is a complete Next.js project, not a folder of snippets. It carries 15 routes, the token file, 47 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 quadrant-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.

the registry

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

Quadrant 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/quadrant

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.

quadrant-1.0.0/

app/generated routes, one per page

globals.csstailwind, the tokens, the semantic bridge

layout.tsxapplies the theme's own faces

page.tsx/ · 7 sections

treatments/page.tsx/treatments · 4 sections

treatments/fissure-sealant/page.tsx/treatments/fissure-sealant · 6 sections

treatments/white-filling-front/page.tsx/treatments/white-filling-front · 6 sections

treatments/white-filling-back/page.tsx/treatments/white-filling-back · 6 sections

treatments/ceramic-crown/page.tsx/treatments/ceramic-crown · 6 sections

treatments/root-canal/page.tsx/treatments/root-canal · 6 sections

treatments/removal/page.tsx/treatments/removal · 6 sections

treatments/wisdom-tooth-removal/page.tsx/treatments/wisdom-tooth-removal · 6 sections

treatments/whitening/page.tsx/treatments/whitening · 6 sections

children/page.tsx/children · 6 sections

team/page.tsx/team · 5 sections

book/page.tsx/book · 7 sections

emergency/page.tsx/emergency · 4 sections

components/page.tsx/components · 2 sections

src/the theme, copied verbatim

app/15 pages, one file each · 16 files

assets/the imagery, and the prompts that made it · 11 files

components/26 sections, one file each, no cross-imports · 89 files

fixtures/5 files

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

fonts.tswires the faces to the font tokens

theme.cssevery design decision: 83 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/ · 7 sections

treatments/page.tsx/treatments · 4 sections

treatments/fissure-sealant/page.tsx/treatments/fissure-sealant · 6 sections

treatments/white-filling-front/page.tsx/treatments/white-filling-front · 6 sections

treatments/white-filling-back/page.tsx/treatments/white-filling-back · 6 sections

treatments/ceramic-crown/page.tsx/treatments/ceramic-crown · 6 sections

treatments/root-canal/page.tsx/treatments/root-canal · 6 sections

treatments/removal/page.tsx/treatments/removal · 6 sections

treatments/wisdom-tooth-removal/page.tsx/treatments/wisdom-tooth-removal · 6 sections

treatments/whitening/page.tsx/treatments/whitening · 6 sections

children/page.tsx/children · 6 sections

team/page.tsx/team · 5 sections

book/page.tsx/book · 7 sections

emergency/page.tsx/emergency · 4 sections

components/page.tsx/components · 2 sections

src/the theme, copied verbatim

app/15 pages, one file each

treatments/

ceramic-crown.tsx

fissure-sealant.tsx

removal.tsx

root-canal.tsx

white-filling-back.tsx

white-filling-front.tsx

whitening.tsx

wisdom-tooth-removal.tsx

book.tsx

children.tsx

components.tsx

emergency.tsx

home.tsx

team.tsx

treatment.tsx

treatments.tsx

assets/the imagery, and the prompts that made it

children/

kids-corner.jpg

practice/

frontage.jpg

surgery/

chair-2-wide.jpg

reception.jpg

team/

ito.jpg

marsh.jpg

nwosu.jpg

reyes.jpg

sloane.jpg

index.ts

README.md

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

ui/the shared primitives

_tt/

accordion-disclosure.axes.ts

accordion-disclosure.fixtures.ts

accordion-disclosure.tsx

anchor.ts

capture.ts

card-panel.axes.ts

card-panel.fixtures.ts

card-panel.tsx

dialog.axes.ts

dialog.fixtures.ts

dialog.tsx

field-ids.ts

field.axes.ts

field.capture.ts

field.fixtures.ts

field.tsx

focusables.ts

form-error-summary.axes.ts

form-error-summary.fixtures.ts

form-error-summary.tsx

form.axes.ts

form.fixtures.ts

form.part.tsx

form.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

variant-selector.axes.ts

variant-selector.capture.ts

variant-selector.fixtures.ts

variant-selector.tsx

accordion-disclosure.tsx

book-link.tsx

button.tsx

card-panel.tsx

chart-strip.tsx

dialog.tsx

fee-line.tsx

field.tsx

form-error-summary.tsx

form.tsx

hint.tsx

mode-toggle.tsx

photo.tsx

popover.tsx

text-link.tsx

tooth-chart.tsx

tooth-chip.tsx

tooth-state.tsx

type.ts

ui.config.ts

variant-selector.tsx

wordmark.tsx

book-asked.tsx

book-direct.tsx

book-halfday.tsx

book-next.tsx

book-request.tsx

chart-index.tsx

children-chart.tsx

children-opener.tsx

children-readout.tsx

children-visits.tsx

emergency-before.tsx

emergency-opener.tsx

hero.tsx

site-footer.tsx

site-header.tsx

team-chairs.tsx

team-days.tsx

team-desk.tsx

tooth-readout.tsx

treatment-chart.tsx

treatment-notes.tsx

treatment-quote.tsx

treatments-end.tsx

treatments-index.tsx

visit-fees.tsx

visit-strip.tsx

fixtures/

booking.ts

children.ts

collie-street.ts

derive.ts

treatments.ts

fonts/self-hosted woff2 with their licenses

AtkinsonHyperlegibleMono-Variable.woff2

AtkinsonHyperlegibleNext-Variable.woff2

Besley-Italic-Variable.woff2

Besley-Variable.woff2

OFL-AtkinsonHyperlegibleMono.txt

OFL-AtkinsonHyperlegibleNext.txt

OFL-Besley.txt

fonts.tswires the faces to the font tokens

theme.cssevery design decision: 83 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

/Point to the tooth.7 sections
/treatmentsTreatments and every fee4 sections
/treatments/fissure-sealantFissure sealant6 sections
/treatments/white-filling-frontWhite filling, front tooth6 sections
/treatments/white-filling-backWhite filling, back tooth6 sections
/treatments/ceramic-crownCeramic crown6 sections
/treatments/root-canalRoot canal6 sections
/treatments/removalRemoving a tooth6 sections
/treatments/wisdom-tooth-removalWisdom tooth removal6 sections
/treatments/whiteningWhitening6 sections
/childrenPoint to the wobbly one.6 sections
/teamWho would see you5 sections
/bookAsk for a time7 sections
/emergencyIn pain today4 sections
/componentsQuadrant's parts2 sections

dropping it into an existing app

Tokens are declared on .tt-quadrant as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-quadrant"> 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 15 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 15 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 83 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
Quadrant's routes are /, /treatments, eight /treatments/<slug> pages, /children, /team, /book, /emergency and /components (the styleguide: noindex, linked from the footer only, delete it before launch if you like). A new route is composition: a page module that renders the header, a <main> of sections, and the footer.
.claude/skills/add-section
A section is one file in src/components/, composed by a route in src/app/. It imports primitives from src/components/ui/, facts from src/fixtures/, and never another section (the one exception is a route that passes one section into another as a child, which is the route's doing, not the section's).
.claude/skills/check-quality
Run all of it, in order. Each step catches a different class of defect, and a green subset is not a pass.
.claude/skills/rebrand
A rebrand of Quadrant 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/quadrant/ 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 306 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.

AGENTS.md, first 39 lines

# Quadrant — agent rules

Quadrant is a dental practice website for Next.js and Tailwind v4, in light and
dark, in React (`src/`) and plain HTML (`html/src/`). Its demo practice is
**Collie Street Dental**: an independent general practice of four chairs at
18 Collie Street, Fremantle WA, with fifteen fees on one schedule, five people
on a Monday-to-Saturday week, and two same-day slots held for pain. Every fact
on every route comes from `src/fixtures/`, and the fixtures throw at import on
a fact that does not add up.

Read this file before changing anything. The rules are short because the
theme is narrow: one device, one ink, one schedule.

## The signature — the disclosed chart

A two-arch FDI tooth chart drawn facing the patient (18…11 | 21…28 over
48…41 | 31…38, so the patient's right is on the viewer's left). Every cell is
its tooth's real mesiodistal width at `--tooth-mm` (8px a millimetre at 1280),
the Zsigmondy cross is the heaviest rule on the sheet (`--chart-cross-width`,
`--chart-cross`), and the teeth a question touches are **disclosed** in the
orchid of a plaque-disclosing tablet (`--primary`). Teeth are never drawn: a
cell is a rectangle, a number and a type code.

- **Implementing files**: `src/components/ui/tooth-chart.tsx` (the picker, a
  recipe on `ui/variant-selector`: native radios, one tab stop, DOM order is
  the arch order, so the arrow keys walk the mouth and a `<form method="get">`
  posts `?tooth=` with no script) and `src/components/ui/chart-strip.tsx` (the
  same geometry at `--strip-width`, read, not operated).
- **Bound to data**: `chartFor()`, `feeFor()` and `firstLookFor()` in
  `src/fixtures/derive.ts` throw on an unknown tooth, a tooth of the wrong
  dentition, an empty set, an unpriced line or a clinician who does not do the
  treatment. A cell cannot disclose a fee the schedule does not have.
- **Where it recurs**: `/` (the picker), `/treatments` (a strip per
  tooth-specific fee), `/treatments/<slug>` (the picker that re-prices: a root
  canal by canal count), `/children` (`dentition="primary"`, 20 cells) and
  `/book` (the first field, at `--tooth-row-compact`).
- **Compositions**: arches from `md`, the four quadrants stacked below it.
  `composition="quadrants"` pins the stacked form at every width (the
  styleguide shows both).

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