About Pure Admin

Pure Admin is a lightweight, data-focused admin framework for building internal tools, dashboards, and back-office applications. Think AdminLTE, but leaner — fewer opinions, less bloat, more control.

Philosophy

  • CSS-first — the core framework is pure SCSS. No build step required to use the compiled CSS.
  • Minimal JS — vanilla JavaScript for interactive components (modals, toasts, command palette, sidebar resize). No React, no Vue, no npm dependency tree.
  • BEM naming — all classes use the pa- prefix with strict BEM: pa-btn, pa-btn--primary, pa-btn__icon.
  • Themeable via SCSS variables — override variables before import, get a completely different look. No CSS custom properties in the core (those are reserved for web component integration).
  • Container queries — the grid system uses container queries instead of viewport breakpoints, making components truly responsive regardless of where they're placed.

What's Included

30+ Components

Alerts Badges Buttons Cards Command Palette Detail Panel Forms & Inputs Grid System Layout Lists Loaders Modals Pagers Profile Panel Statistics Tables Tabs Toasts Tooltips Utilities

Grid System

Flexbox-based with container query breakpoints:

.pa-row              — Flex container
.pa-col              — Auto-equal width (flex: 1)
.pa-col-{5-100}      — Percentage columns (5% increments)
.pa-col-1-2, 1-3     — Fraction columns
.pa-col-sm-*, md-*   — Responsive variants (container queries)

RTL Support

Full right-to-left support using CSS Logical Properties. Add dir="rtl" to your HTML element and all components automatically mirror. Logical utility classes for spacing: .ms-* / .me-*, .ps-* / .pe-*.

Theming

Themes are standalone SCSS files that override variables and import the core. Each theme is packaged as a ZIP with compiled CSS, SCSS source, fonts, and a theme.json manifest. Available themes can be browsed and downloaded from the homepage. See the Theme Customization guide for using custom fonts with baseline correction. 

// Custom theme in 3 lines
@import 'variables';        // Load defaults
$primary-bg: #bb0a30;       // Override what you want
@import 'core';             // Build with your overrides

Web Component Integration

Every theme exports 45+ --base-* CSS custom properties covering colors, inputs, dropdowns, typography, and border-radius. These variables are automatically consumed by KeenMate's web components — no extra configuration needed:

web-multiselect web-daterangepicker web-grid web-treeview

The components pick up theme colors through CSS variable fallback chains, so switching themes automatically re-styles all web components to match. 

/* Components consume theme variables via fallback chains */
--ms-accent-color: var(--base-accent-color, #3b82f6);
--ms-input-border: var(--base-input-border-color, #cbd5e1);

Installation

npm install @keenmate/pure-admin-core

Then include the CSS:

<link rel="stylesheet" href="node_modules/@keenmate/pure-admin-core/dist/css/main.css">

Or with a theme:

<link rel="stylesheet" href="path/to/theme/corporate.css">

Links

Who Made This

Built by KeenMate — a software development company that needed a solid admin framework for internal projects and client dashboards. Instead of fighting with heavyweight solutions, we built something that gets out of the way and lets you focus on data.