Atrium owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.6.2
- version
- 10
- pages
- 37
- components
- 58 × 2 modes
- tokens
- 4
- workflows
unzip atrium-2.6.2.zip
cd atrium-2.6.2
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 10 routes, the token file, 37 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 atrium-2.6.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/atrium/, mirroring the tree below.
Atrium 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/atriumAn 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.
- /Overview7 sections
- /pipelinePipeline6 sections
- /accountsAccounts6 sections
- /forecastForecast6 sections
- /calendarCalendar4 sections
- /activityActivity4 sections
- /reportsReports3 sections
- /new-dealNew deal3 sections
- /new-accountNew account3 sections
- /componentsThe parts17 sections
Tokens are declared on .tt-atrium as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-atrium"> 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 10 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 10 pages you saw above exist in both.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 58 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 Atrium is one file in themes/atrium/src/app/ with a default export, wrapping existing sections in AppShell. It fetches nothing, holds no state and imports no Next APIs, because it has to render both standalone and inside the marketplace preview route.
- .claude/skills/add-section
A section in Atrium is one file in themes/atrium/src/components/, importing nothing but ./ui/*, lucide-react and — for charts only — recharts, and exporting one named component in PascalCase.
- .claude/skills/check-quality
Run all eleven checks. Any failure blocks publishing.
- .claude/skills/rebrand
Atrium is built so this is a one-file colour edit plus a rename. Everything visual lives in themes/atrium/src/theme.css; nothing in src/components/ names a colour.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/atrium/ 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 1201 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# Atrium — rules for agents
Atrium is a CRM console theme (Tailwind v4 / Next.js 15 / React 19). The demo
content belongs to a fictional CRM, **Marlow**, as used by a fictional company,
**Torrey Cold Chain** — cold-chain monitoring hardware and software sold to food
and pharma distributors, five reps, twelve open deals.
**It works.** Since 2.2.0 the board drags, the wizard saves, accounts and
contacts have real CRUD, the toolbar filters, the calendar pages and the top bar
flips the mode — all against one fixture file, so every total on screen moves
together. Read invariants 8 and 13 before touching anything: they are the two
that reversed, and they are why the rest of the file reads the way it does.
**2.2.1 is a render pass, not a feature.** Four things the owner could see and
the source could not: the rail stopped collapsing to unlabelled icons, the rail
tone got the step back that 2.2.0's lighter ground had eaten, the wizard stopped
printing its page title twice, and the empty stage in `stage-breakdown` stopped
rendering as nothing. Every one of them is in the table below.
**2.2.2 fixes two things that were wrong on all nine routes at once**, which is
what makes them worth a version: the frame measured itself against the wrong
box, and the heading band had no alignment a reader could see. Both were
single-file defects with nine-page symptoms — the shell and `page-heading` are
rendered by every route — and both are invariants now (20 and 21).
Read this before changing anything. The four workflows in `.claude/skills/`
(`rebrand`, `add-section`, `add-page`, `check-quality`) are the sanctioned way to
extend Atrium; they are written against the real file names and token names
below.
**2.5.0 adds the layer the console never had.** Dialog, dropdown menu, tabs,
tooltip, toast, date picker, skeleton/progress/notice and the sortable, paging
table — nine primitive files, all Atrium's own, all sharing ONE behaviour
implementation in `ui/overlay.tsx`. It also closes three defects: the bulk
delete asked nothing, removing a contact asked nothing, and the accounts table
drew a sort caret it could not honour. Ten routes, seventeen sections, nineteen
primitives, five Recharts figures, fifty-eight tokens per mode. Read invariant
24 before touching any overlay.
**2.3.0 adds one decision surface without adding a second data source.**The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.