Atrium owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.2.2
- version
- 9
- pages
- 25
- components
- 54 × 2 modes
- tokens
- 4
- workflows
unzip atrium-2.2.2.zip
cd atrium-2.2.2
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 9 routes, the token file, 25 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.2.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.
bunx shadcn add https://tailthemes.com/r/atrium.jsonAtrium is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
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
- /new-dealNew deal3 sections
- /new-accountNew account3 sections
- /componentsThe parts16 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.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 54 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 802 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.
---
## What 2.2.0, 2.2.1 and 2.2.2 reversed
Every row here is a decision an earlier version argued for in this file, and a
later one overturned on the owner's critique. They are listed together because a
future session will otherwise read the old reasoning somewhere and reinstate it.
The first two rows are 2.2.2, the next five are 2.2.1, the rest are 2.2.0.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.