sent here for Quadrant
at a glance: Quadrant
dental website template nextjs · React and HTML source
Quadrantdental website template Next.js
Quadrant is a dental website template for Next.js and Tailwind, for the developer building a site for an independent general practice that publishes its fees and answers its own phone.
- 83 / 83
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- 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 26 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- site-header
- hero
- chart-index
- tooth-readout
- visit-fees
- +2
- site-header
- treatments-index
- treatments-end
- site-footer
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- treatment-chart
- treatment-quote
- treatment-notes
- treatments-end
- +1
- site-header
- children-opener
- children-chart
- children-readout
- children-visits
- +1
- site-header
- team-chairs
- team-days
- team-desk
- site-footer
- site-header
- book-request
- book-halfday
- book-direct
- book-asked
- +2
- site-header
- emergency-opener
- emergency-before
- site-footer
- site-header
- site-footer
Its index is the patient's own mouth: a two-arch FDI tooth chart with every cell sized to the tooth's real width, so a patient points to the tooth that hurts and the page says what a first look costs, what it might need next and who would see them. Fifteen routes ship in light and dark, in React and in plain HTML: the home chart, one treatments page with all 15 fees, eight treatment pages that re-price by tooth and canal count, a children's page on the 20-tooth chart, the team by chair and day, a booking request whose first field is the chart, a same-day emergency page and a styleguide of every part. Every figure is derived from one fixture that refuses a broken schedule at build, both modes pass WCAG AA, the zip runs as it is, and AGENTS.md gives your coding agent the rules.
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. 37 frames cover them, with 11 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 disclosed chart: a two-arch FDI tooth chart drawn facing the patient, every cell a tooth's real mesiodistal width at 8px per millimetre, the Zsigmondy cross ruled between the arches, and the teeth a question touches disclosed in the orchid of a plaque-disclosing tablet. Implemented in src/components/ui/tooth-chart.tsx (a recipe on ui/variant-selector: native radios, one tab stop, DOM order = arch order, posts ?tooth= without JavaScript; dentition adult or primary, composition arches or quadrants) and src/components/ui/chart-strip.tsx (the same geometry at 160px). chartFor(), firstLookFor() and feeFor() in src/fixtures/derive.ts throw at build on an unknown tooth, an unpriced line or a clinician who does not do the treatment. It recurs on /, /treatments (a strip per tooth-specific fee), /treatments/<slug> (re-pricing, a root canal by canal count), /children (the 20-cell primary chart) and /book (the first field).
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.333.
Quadrant
Quadrant is a dental website template for Next.js and Tailwind, for the developer building a site for an independent general practice that publishes its fees and answers its own phone.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Besley
- text
- Atkinson Hyperlegible Next
- mono
- Atkinson Hyperlegible 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.mdAdd a route to Quadrant end to end
- add-section/SKILL.mdGraft a new section into Quadrant the way its own sections are built
- check-quality/SKILL.mdRun Quadrant's own quality checks on your copy of the theme
- rebrand/SKILL.mdPut a real dental practice into Quadrant
- src/
- theme.css83 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/8 files
- components/26 files
- ui/22 files
- assets/1 markdown file, 1 file
- fonts/4 font files, 3 licenses
- app/15 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/15 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.
47 components, 15 pages and 83 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.0.0: First release: a dental practice site whose index is the patient's own mouth, in React and plain HTML
- v1.0.0: A dental practice site whose index is the patient's own mouth: point to a tooth and the page prices a first look, in React and plain HTML
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.
