Lightweight, data-focused HTML/CSS admin framework built with SCSS and a comprehensive component system.
- 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
- 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:
<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 -->- 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.