sent here for Atrium
tailwind crm dashboard template · React and HTML source
AtriumTailwind CRM dashboard template
A Tailwind CRM dashboard template for sales teams that need one consistent view of pipeline work.
- 58 / 58
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
Ten pages include an overview, a drag-and-drop pipeline, account CRUD, forecast, calendar, activity log, create wizards, reports, and a living component showcase.
- 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 17 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Overview/
- app-shell
- page-heading
- kpi-row
- bookings-chart
- stage-breakdown
- +2
Pipeline/pipeline- app-shell
- page-heading
- filter-bar
- pipeline-board
- stage-breakdown
- +1
Accounts/accounts- app-shell
- page-heading
- filter-bar
- accounts-table
- record-panel
- +1
Forecast/forecast- app-shell
- page-heading
- forecast-table
- bookings-chart
- funnel-chart
- +1
Calendar/calendar- app-shell
- page-heading
- calendar-view
- deal-table
Activity/activity- app-shell
- page-heading
- filter-bar
- activity-timeline
Reports/reports- app-shell
- page-heading
- reports-workspace
New deal/new-deal- app-shell
- page-heading
- record-form
New account/new-account- app-shell
- page-heading
- record-form
The parts/components- app-shell
- page-heading
- filter-bar
- kpi-row
- bookings-chart
- +12
Reports compare weighted pipeline by close period, owner, stage, and health status from the same current CRM snapshot, with exact table data, renameable personal views, and a real CSV export. Seventeen independent sections and twenty primitives build the system, including a modal dialog, a dropdown menu, tabs, tooltips, toast receipts, a keyboard date picker, sortable paging tables, and skeleton, progress and permission-denied states. Every overlay opens from click or keyboard, closes on Escape, traps focus and returns it to the control that opened it. One file declares twelve deals, twelve accounts, and ten contacts; every operational pipeline figure derives from that spine. Bookings history and twelve-week trend examples remain authored section fixtures. Five Recharts figures use CSS variables; analytical charts include table alternatives, while sparklines repeat their visible deltas. The console ships light and dark modes, self-hosted Inter Tight and Red Hat Mono, keyboard routes, visible focus, and computed WCAG AA text pairs. Built for Tailwind v4, Next.js 15 and React 19; every colour remains in theme.css. The same ten routes ship again as a framework-free HTML template: compiled documents, one stylesheet, local fonts and vanilla JavaScript, with the Nunjucks source beside them.
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. 26 frames cover them, with 12 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
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.125.
Atrium
A Tailwind CRM dashboard template for sales teams that need one consistent view of pipeline work. Ten pages include an overview, a drag-and-drop pipeline, account CRUD, forecast, calendar, activity log, create wizards, reports, and a living component showcase.
const { open, close } = useLedger("2026-03") // 0123456789
- text
- Inter Tight
- mono
- Red Hat Mono
No separate display face: the headings are set in the text face.
- d1Ag
- d2Ag
- d3Ag
- d4Ag
- leadAg
- bodyAg
- smallAg
- denseAg
- captionAg
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.mdCompose a new console route for the Atrium theme out of its existing sections, matching the shell, heading and manifest patterns of the overview, pipeline and accounts pages
- add-section/SKILL.mdAdd a new self-contained section component to the Atrium theme following its existing file, token, density and chart patterns, then wire it into a page and the manifest
- check-quality/SKILL.mdRun Atrium's own quality gate locally
- rebrand/SKILL.mdRepalette and rename the Atrium theme
- src/
- theme.css58 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/10 files
- components/17 files
- ui/21 files
- assets/5 images, 1 markdown file
- fonts/2 font files, 2 licenses
- app/10 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/10 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.
37 components, 10 pages and 58 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?
The dashboard needs a front door.
Atrium is what your customers use. Grove is the page that gets them there — same Tailwind version, same token architecture, so the marketing site and the product do not look like two different companies.
activity
- v2.6.2: The reports strip reads as four matched cells, the wizard aside ends beside its fields, and the calendar lists its close dates first on a phone.
- v2.6.1: The parts page now reads its version and counts from the manifest, and the listing counts twenty primitives, matching the page.
- v2.6.0: The version the library swap deferred: eight primitives on tt-ui, the styleguide eyebrow corrected to the bytes it ships
- v2.5.1: The overlay engine the shared core was extracted from is deleted; 32 of 36 component captures came back byte-identical
- v2.5.0: A real overlay layer — dialog, menu, tooltip, toast, tabs, date field and a sortable, paged accounts table, each on one keyboard contract
- v2.4.3: Every skill now documents the HTML edition half of its job, and adding a page can no longer fail the parity gate by omission
- v2.4.2: Inputs sit in a recessed field well with a soft edge; hover no longer out-shouts focus and the chrome stops competing with the active row
- v2.4.1: The forecast meter announces its real percentage, and two controls that opened nothing are now honest static UI
- v2.4: Separate Nunjucks source and framework-free HTML output for every route
- v2.3: Close-period reports, exact stage evidence, personal saved views and CSV export
- v2.2 — the console works: drag-and-drop board, create wizards, account CRUD
- v2.2 — quieter admin ground, mode toggle, calendar, funnel, coverage map
- v2.1 — forecast, activity log, and the create forms
- v2.0 — Inter Tight type, indigo on deep paper, one-sheet hairline console
- v1.1 — drafting-paper masthead on the overview, token-inked
- v1.0.0 — CRM console: board, dense tables, real recharts
- column chooser for dense account tablesplanned
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.
