Lightweight, data-focused HTML/CSS admin framework built with SCSS and a comprehensive component system.
- Live Demo — demo.pureadmin.io (try every theme in the browser)
- Main Site — pureadmin.io (themes catalog, CLI docs, project templates)
pureadminCLI — npm (npx pureadmin create,npx pureadmin themes add)
- Lightweight - Minimal footprint, no JavaScript dependencies for styling
- Data-focused - Optimized for admin dashboards and data-heavy applications
- RTL Support - Full right-to-left language support using CSS Logical Properties
- Themeable - Multiple themes available, easy to create custom themes
- Responsive - Mobile-first responsive design
- BEM Architecture - Clean, maintainable CSS with
pa-prefixed classes - 10px rem base - Simple calculations (1.6rem = 16px)
| Package | Version | Description |
|---|---|---|
| @keenmate/pure-admin-core | |
Core framework with default theme |
| @keenmate/pure-admin-theme-audi |  |
Audi-inspired red theme |
| @keenmate/pure-admin-theme-corporate |  |
Professional blue/gray theme |
| @keenmate/pure-admin-theme-dark |  |
Dark theme with color variants |
| @keenmate/pure-admin-theme-express |  |
Bold yellow/red logistics theme |
| @keenmate/pure-admin-theme-minimal |  |
Clean minimal theme |
npm install @keenmate/pure-admin-core<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-core/dist/css/main.css">Or with a bundler:
import '@keenmate/pure-admin-core/dist/css/main.css';npm install @keenmate/pure-admin-theme-audi<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-theme-audi/dist/audi.css">// Override variables before importing
$accent-color: #your-color;
$sidebar-width: 280px;
// Import the framework
@import '@keenmate/pure-admin-core/src/scss/main';Pure Admin includes a comprehensive set of components:
- Layout - Header, sidebar, footer, responsive grid
- Navigation - Navbar, sidebar navigation, tabs, breadcrumbs
- Content - Cards, tables, lists, alerts, callouts
- Forms - Inputs, selects, checkboxes, validation states
- Feedback - Modals, toasts, tooltips, loaders
- Data - Statistics, badges, labels, timeline, data display patterns (fields, desc tables, banded rows, dot leaders, accent grids)
- Interactive - Command palette, detail panels, profile panel
<div class="pa-card">
<div class="pa-card__header">
<h3>Card Title</h3>
</div>
<div class="pa-card__body">
<p>Card content goes here.</p>
</div>
<div class="pa-card__footer">
<button class="pa-btn pa-btn--primary">Save</button>
</div>
</div>Flexible grid system with responsive breakpoints:
<div class="pa-row">
<div class="pa-col-md-50">Half width on medium+</div>
<div class="pa-col-md-50">Half width on medium+</div>
</div>.pa-col-{5-100}- Percentage widths (5% increments).pa-col-1-2,.pa-col-1-3,.pa-col-1-4- Fraction widths.pa-col-sm-*,.pa-col-md-*,.pa-col-lg-*,.pa-col-xl-*- Responsive variants
Full right-to-left language support. Simply add dir="rtl" to your HTML element:
<html dir="rtl" lang="ar">All components automatically mirror. Use logical utilities for RTL-aware spacing:
.ms-*/.me-*- margin-inline-start/end.ps-*/.pe-*- padding-inline-start/end.text-start/.text-end- logical text alignment
Height and flex utilities for dynamic layouts:
<!-- Full height card in flex container -->
<div class="d-flex flex-column h-screen">
<div class="pa-card flex-1 d-flex flex-column">
<div class="pa-card__header">Fixed Header</div>
<div class="pa-card__body flex-1 overflow-auto">Scrollable Content</div>
</div>
</div>.h-full,.h-screen- 100% / 100vh height.min-h-full,.min-h-screen- Minimum heights.flex-1,.flex-auto- Flex grow/shrink utilities.flex-grow,.flex-shrink-0- Individual flex properties
Themes support light/dark modes via CSS classes on <body>:
<body class="pa-mode-dark">The Dark theme also supports color accent variants:
<body class="pa-color-blue">
<!-- or pa-color-green, pa-color-red -->The mode/variant classes go on <body>, not <html>. CSS custom-property values are inherited parent → child only, so reading vars from document.documentElement (<html>) returns the :root (dark-default) values regardless of which mode is active — the override on <body> never propagates upward. Always read theme vars from document.body:
// ✅ correct — sees the active mode's values
const styles = getComputedStyle(document.body);
const textColor = styles.getPropertyValue('--pa-text-color-1').trim();
// ❌ wrong — reads <html>, misses .pa-mode-light overrides on <body>
getComputedStyle(document.documentElement).getPropertyValue('--pa-text-color-1');Plain CSS (stylesheets, inline style=) using var(--pa-*) is unaffected — it updates live when the class on <body> changes.
Code that snapshots CSS vars at draw time (D3 charts, canvas, baked SVG fills, web components reading attributes) needs to know when the user toggles mode or variant. Whatever code flips the body class should also dispatch a window event, e.g.:
// Mode toggler
document.body.classList.toggle('pa-mode-dark');
window.dispatchEvent(new CustomEvent('pa:theme-change', { detail: { kind: 'mode' } }));Charts and other snapshot-style code listen and re-render:
function renderChart() {
const styles = getComputedStyle(document.body);
const accent = styles.getPropertyValue('--pa-accent').trim();
// ...draw chart with `accent`
}
renderChart();
window.addEventListener('pa:theme-change', renderChart);The demo's settings-panel.js already follows this convention. If you don't re-render, the page will look correct except for the snapshotted nodes, which keep stale colors until a hard reload.
The demo server runs in Docker with themes baked in at build time. Themes not included in the image are downloaded on-demand from pureadmin.io when a user requests them.
make docker-build
docker compose up -dConfigure which themes are baked in via the THEMES_URL build arg in the Dockerfile. Additional themes are fetched lazily at runtime with a 10-minute negative cache for failed lookups.
- Node.js 18+
- npm 9+
- Make (recommended, or use npm commands directly)
# Clone the repository
git clone https://github.com/KeenMate/pure-admin.git
cd pure-admin
# Install dependencies and build
make setup
# Build all packages (core + themes)
make build-all
# Run demo server
make dev
# Open http://localhost:3000make setup # Install dependencies
make build # Build core CSS
make build-all # Build core + all themes
make dev # Development mode with demo server
make watch # Watch for changes
make clean # Clean dist directories
make publish # Publish to npmIf you don't have Make installed, use npm directly:
npm install # Install dependencies
npm run build:all # Build everything
npm run dev # Development modepure-admin/
├── packages/
│ ├── core/ # @keenmate/pure-admin-core
│ ├── theme-audi/ # @keenmate/pure-admin-theme-audi
│ ├── theme-corporate/
│ ├── theme-dark/
│ ├── theme-express/
│ └── theme-minimal/
├── demo/ # Demo site (localhost:3000)
└── docs/ # Documentation
- Component Examples: Run the demo server and browse components
- HTML Snippets: See
packages/core/snippets/for copy-paste examples - SCSS Variables: See
packages/core/src/scss/variables/
Contributions are welcome! Please read our contributing guidelines before submitting a PR.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see the LICENSE file for details.
Built with care by KeenMate.