Everything you need to get Pure Admin running in your project.
Installation
Install the core package and the CLI:
npm install @keenmate/pure-admin-core
npm install -g @keenmate/pureadminThen download a theme using the CLI:
# Download one or more themes
pureadmin themes audi
pureadmin themes audi dark expressThis downloads the theme CSS into your project (default: static/themes/) and saves the configuration to pureadmin.json. Then link it in your HTML:
<link rel="stylesheet" href="static/themes/audi/audi.css">Basic HTML Setup
Link the theme CSS (which includes the core) and use the standard layout structure:
<!DOCTYPE html>
<html lang="en" class="pa-font-responsive">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/theme/audi.css">
</head>
<body>
<!-- Navbar -->
<header class="pa-navbar">
<span class="pa-navbar__brand">My App</span>
</header>
<!-- Layout: sidebar + main -->
<div class="pa-layout">
<aside class="pa-layout__sidebar">
<nav class="pa-sidebar__nav">
<ul>
<li class="pa-sidebar__item">
<a href="/" class="pa-sidebar__link pa-sidebar__link--active">
<span class="pa-sidebar__label">Dashboard</span>
</a>
</li>
</ul>
</nav>
</aside>
<main class="pa-layout__main">
<div class="pa-card">
<div class="pa-card__body">Hello, Pure Admin!</div>
</div>
</main>
</div>
</body>
</html>SCSS Customization
Override SCSS variables before importing the core to customize the framework:
// Override variables first
$primary-bg: #1a73e8;
$btn-primary-bg: #1a73e8;
$body-font-family: 'Inter', sans-serif;
// Then import core (applies your overrides via !default)
@import '@keenmate/pure-admin-core/src/scss/main';See Theme Variables for the full list of customizable variables.
Themes & Updates
Themes are standalone CSS files that include the core framework. Browse and preview all available themes at pureadmin.io, or use the settings panel (gear icon) on this demo to try them live.
Keeping themes up to date
The CLI tracks installed theme versions in pureadmin.json. To check for updates and re-download only what changed:
pureadmin updateOnline vs. Offline mode
By default, theme files are not committed to git — they are downloaded on demand. For air-gapped environments or reproducible builds, use offline mode:
# Offline: theme files committed to your repo, no network needed in CI/CD
pureadmin themes audi --offline
# Online (default): theme files gitignored, downloaded during build
pureadmin themes audiCI/CD & Docker
Use the CLI in your Dockerfile — it reads pureadmin.json and downloads the configured themes:
RUN npm install -g @keenmate/pureadmin && \
pureadmin themesOr with offline themes already committed to your repo, no download step is needed at all.
Responsive Font Sizing
Pure Admin uses a 10px rem base — the html font-size is 10px, so all rem values
scale proportionally. Changing the html font-size scales the entire UI: text, spacing, components.
Shorthand (recommended)
One class for the common case — default on desktop, larger on mobile:
<html class="pa-font-responsive">
<!-- Desktop: 10px base (16px body text) -->
<!-- Mobile (≤768px): 12px base (~19px body text) -->Granular Control
Pick exact sizes for desktop and mobile independently:
<html class="pa-font-base-10 pa-font-mobile-12">| Class | html font-size | Body text result |
|---|---|---|
pa-font-base-9 / pa-font-mobile-9 |
9px | ~14px |
pa-font-base-10 / pa-font-mobile-10 |
10px | 16px (default) |
pa-font-base-11 / pa-font-mobile-11 |
11px | ~18px |
pa-font-base-12 / pa-font-mobile-12 |
12px | ~19px |
@media (max-width: 640px) {
html { font-size: 12px; }
}RTL Support
Full right-to-left support via CSS Logical Properties. Just set the dir attribute:
<html dir="rtl" lang="he">All components automatically mirror. Use logical utility classes for RTL-aware spacing:
| Class | Purpose |
|---|---|
.ms-* / .me-* |
Margin inline-start / inline-end |
.ps-* / .pe-* |
Padding inline-start / inline-end |
.text-start / .text-end |
Logical text alignment |
CSS Naming Convention
All classes use the pa- prefix with BEM naming:
pa-[block]__[element]--[modifier]
Examples:
pa-btn → block
pa-btn__icon → element
pa-btn--primary → modifier
pa-btn--lg → size modifier
pa-card__header--collapsed → element + modifierNext Steps
See all available components with live examples in the Components Overview.
Learn about all customizable variables in Theme Variables.