Switchyard owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 1.7.2
- version
- 20
- pages
- 47
- components
- 79 × 2 modes
- tokens
- 4
- workflows
unzip switchyard-1.7.2.zip
cd switchyard-1.7.2
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 20 routes, the token file, 47 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 switchyard-1.7.2.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/switchyard/, mirroring the tree below.
Switchyard 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/switchyardAn 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.
- /Overview4 sections
- /workflowsWorkflows2 sections
- /workflowWorkflow editor2 sections
- /templatesTemplates2 sections
- /runsRuns2 sections
- /runRun detail2 sections
- /approvalsApprovals2 sections
- /chatChat2 sections
- /agentsAgents2 sections
- /agentAgent configuration2 sections
- /evalsEvaluations2 sections
- /evalEvaluation detail7 sections
- /toolsTools2 sections
- /knowledgeKnowledge2 sections
- /guardrailsGuardrails2 sections
- /activityActivity2 sections
- /usageUsage2 sections
- /api-keysAPI keys2 sections
- /settingsSettings2 sections
- /componentsComponents28 sections
Tokens are declared on .tt-switchyard as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-switchyard"> 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 20 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 20 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 79 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. Create a static src/app/<slug>.tsx; use AppShell and compose sections without data fetching.
- .claude/skills/add-section
1. Create one src/components/<name>.tsx.
- .claude/skills/check-quality
Run from the repository root and stop on failure:
- .claude/skills/rebrand
1. Edit values in src/theme.css; keep the light, dark, and explicit light scope blocks complete.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/switchyard/ 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 274 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Switchyard
Read this file before editing the theme. The repository `themes/CONTRACT.md` remains binding.
## Declarations
| Axis | Decision |
|---|---|
| Signature | **The execution stitch:** one canonical Wire topology appears as an editable workflow, chronological run tape, and agent configuration boundary. Node IDs and facts stay stable across those readings. |
| Sanctioned deviation | The navigation rail remains a dark branded plane in light mode while the application canvas stays neutral. The 1.200 ratio is required because Atrium already owns the neighbouring dashboard scale. |
| Register | Operational. Name the fixture, rule, threshold, tool boundary, or consequence. |
| Motion | Decisive and mechanical. 120ms controls and tooltips, 180ms overlays and inspector, 240ms stitch emphasis, at most 4px translation. Every close is the quicker half — overlays leave in 150ms, the tooltip in 50ms after an 80ms intent gate — and a close carries no distance. Only a running stitch or a pending control may pulse; the skeleton sweep is the one loop that is not a pulse. Reduced motion is static and complete. |
| Text/display | Inter, for compact open forms across labels, tables, chat, and configuration. |
| Mono | JetBrains Mono, reserved for node IDs, model names, revisions, latency, cost, and JSON keys. |
## File map
- `src/theme.css` — every color, font, type step, state ramp, radius, and namespaced motion rule.
- `src/fonts.ts` + `src/fonts/` — self-hosted Inter and JetBrains Mono with OFL files.
- `src/assets/repair-triage.wire.json` — canonical workflow topology and serializable node options.
- `src/components/ui/data.ts` — reusable frontend fixtures: agents, runs, chat, tools, knowledge, policies, and templates.
- `src/components/ui/wire.ts` — typed JSON boundary; never duplicates topology.
- `src/components/ui/dashboard-layout.tsx` — required shell geometry boundary; product navigation remains in `app-shell.tsx`.
- `src/components/ui/_tt/` — **library-owned**, vendored from the repository's `ui/` library. The layer stack, Escape, the focus trap and return, the scroll lock, roving focus, anchoring, the toast queue, the sort state — and the eight parts' skeletons. Never edit it; `bun run ui sync switchyard` re-vendors it. See `## Component library`.
- `src/components/ui/ui.config.ts` — the theme's cross-part knobs: portal policy (`nearest-host`), token scope, durations, focus ring, and the one raised-surface string every floating layer shares.
- `src/components/ui/dialog.tsx`, `confirm-dialog.tsx`, `menu.tsx`, `tooltip.tsx`, `toast.tsx`, `skeleton.tsx`, `sort-head.tsx`, `pagination.tsx` — the recipes: every class string, every word, every icon a buyer sees.
- `src/components/ui/date-picker.tsx` — theme-owned structure on the library's engine; the part itself is owed (see `## Component library` § Owed).
- `src/components/ui/toast.tsx`, `skeleton.tsx`, `progress.tsx` — the feedback layer.
- `src/components/ui/tabs.tsx` — the one tab implementation; both tablists in `workflow-canvas.tsx` use it.
- `src/components/ui/rail-workspace.tsx` — the rail's workspace trigger and menu.
- `src/components/ui/gallery.tsx` — the styleguide's flat renderings of the overlay surfaces. Demo furniture, deliberately not a manifest component; delete it in a buyer project.
- `src/components/ui/` — shared primitives only.
- `src/components/` — one independent section per file.
- `src/app/` — static page compositions; `/components` is the living styleguide.
- `html/html.json` — the HTML edition's route registry and copied asset folders.
- `html/src/` — Nunjucks layout, components, the shared `pages/page.html`
template, `data/site.json`, `css/theme.css` (imports `src/theme.css`, adds the
edition's own font faces) and `js/main.js`, which holds all of its behaviour.
- `html/dist/` — compiled output. Generated by the build; never hand-edited.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.