Admin,
pressed.
Atelier is a multipurpose admin & dashboard template with a neo-brutalist interface: thick ink borders, hard offset shadows with zero blur, raw color blocks, and a mechanical press on every clickable surface. Built on Tailwind CSS v4 and shipped as one standalone React 19 project.
No sign-up, no sandbox — every screen below is the real production build, and one click opens it live.
The whole thing, running.
Eleven pages, captured at 1440 × 900 from the very build this site serves — not a mockup, not a redraw. Flip through the tabs, then hit Open full to land on the real, clickable page in a new tab.
Twelve worlds, not twelve accents.
Most admin templates recolor one variable. An Atelier scheme swaps every color role at once — canvas, ink, accent, secondary, tertiary, the semantics and the chart ramp — so each one is a whole identity, not a tint. Below is one scheme per shot, on a different page each time, straight from the build. Click any of them to repaint this page in that world.
Type is its own axis: twelve display/body pairs, switchable independently, so the palette you like is never welded to a typeface you don't. 144 combinations, all at runtime, no rebuild. Each shot below is in its scheme's default pair — try another from the control in the header.
React 19, all the way down.
One standalone Vite project — typed end to end, themed from a token core, and free of the things you would only have to work around. No jQuery, no Bootstrap, no icon font and no component library to fight.
React
19.2Function components and hooks throughout — no class components, no legacy context.
Tailwind CSS
v4The v4 engine over 221 design tokens. Components read roles, never literal values.
Vite
6.4Instant dev server, one npm run build, and every route code-split.
TypeScript
5.9Strict mode, unused locals and parameters on. One any in the codebase.
React Router
7.18All 114 routes from one manifest — the sidebar, breadcrumb and ⌘K palette read it.
ApexCharts
4.481 live charts across 23 pages, themed from the same tokens, mounted on scroll.
Leaflet
1.9Real maps, not images — and like the charts, loaded only when they come into view.
Zero runtime CSS
20.4 KB gzip13 stylesheets compiled once. No CSS-in-JS, no styled-components, no cascade layer war.
A back office, not a widget demo.
Seventeen dashboards, ten web apps, six vertical modules and a complete eCommerce suite — built as real screens with real data shapes, not lorem tiles.
17 niche dashboards
Sales, Analytics, eCommerce, CRM, Projects, Finance, Crypto, NFT, Jobs, HR, LMS, Stocks, Healthcare, POS, Social, School and Podcast — each written for its domain.
10 web apps
Email, Chat, Calendar, Kanban, To-Do, File Manager, Gallery, Contacts, Notes and a Media Player — each a working interaction model, not a static mock.
12 schemes × 12 type sets
Color and type are independent axes — 144 combinations at runtime. Every scheme has a purpose-built dark mode tuned to AA, not an auto-inverted afterthought.
Live customizer
Color scheme, type set, light/dark, direction, sidebar style, page style, width, header position and surface scheme — all live-apply, all persisted, zero flash on reload.
Charts, tables & maps
ApexCharts across a full chart catalogue, data tables, and Leaflet maps — all reading design tokens, so they re-theme the instant you switch scheme.
RTL, done at the token level
The whole shell is written with logical properties, so right-to-left flips the layout without flipping a single color, shadow or icon that shouldn't move.
Tokens, not hardcoded values
A three-layer --at- token core — primitives, roles, presets. Components
read roles only, which is why one attribute can re-skin the entire product.
Responsive & accessible
Every page works from ultrawide to phone, with an off-canvas sidebar, visible focus
rings on every control, and full prefers-reduced-motion support.
Command palette
⌘K opens a searchable index of every route in the product, driven by the same nav manifest that builds the sidebar — and the page list further down this site.
What you actually get.
- One standalone React 19 project
- 114 pages, every route real
- Tailwind CSS v4 throughout
- 17 niche dashboards
- 10 web application modules
- Complete eCommerce suite
- 12 color schemes × 12 type sets
- Purpose-built dark mode
- Full RTL support
- Live theme customizer
- ApexCharts chart catalogue
- Data tables & Leaflet maps
- Authentication & error pages
- Command palette (⌘K)
- Three-layer design token core
- Documentation & license
Before you buy.
One standalone React 19 project — src/, public/,
package.json, vite.config.ts and the TypeScript
configs — plus HTML documentation. npm install && npm run dev
and all 114 pages are running.
No. Atelier is Tailwind CSS v4 with a three-layer custom design-token core. No Bootstrap, no jQuery, and no component library you have to fight.
An accent recolors one variable. An Atelier scheme swaps every color role at once — canvas, ink, the split accent, secondary, tertiary, the semantic ramp and the chart palette — so each of the twelve is a complete identity with its own tuned dark mode, not a tint of the same design. Typography is a second, independent axis of twelve, so you can take a scheme's palette without its typeface: 144 combinations, switchable at runtime.
Pick one of the twelve schemes in the customizer, or edit one block of CSS custom properties. Because every component reads role tokens rather than literal values, a single scheme block re-skins the entire product — including the charts. Type sets work the same way and are changed independently.
No. npm run dev and npm run build are the two
commands, and the config is fourteen lines. Vite is there to compile Tailwind
and bundle for production — you never have to open it.
No. Photos, avatars and illustrations are placeholders for preview only and are not licensed for redistribution — swap them for your own assets before you go live.
Stop shipping the same dashboard.
One purchase, one React codebase, and an interface nobody will mistake for the template next to it.