Getting Started · PureAdmin

keen_pure_admin is a Phoenix LiveView component library that wraps the Pure Admin CSS framework (@keenmate/pure-admin-core) into function components and LiveComponents.

Drop-in replacement for Phoenix CoreComponents — provides button/1, modal/1, table/1, input/1, and 35+ more components with full BEM class support.

35+

Components
Ready to use

14

JS Hooks
LiveView integrated

5

Themes
Fully customizable

This documentation site showcases the keen_pure_admin component library with multiple theme options. Use the settings panel (gear icon) to switch between themes and customize the appearance.

Theme Switching & FOUC

On initial page load, you may notice a brief flash of the default theme before your selected theme loads. This is expected behavior in this demo.

Why? The default theme is bundled statically to prevent unstyled content (FOUC), then your saved theme preference loads dynamically via JavaScript.

Production Usage

In a production application, you would import only one theme statically in your CSS. This eliminates the flash entirely since there's no theme switching overhead.

The SettingsPanel component (gear icon in the corner) is primarily a demo and development tool to showcase what's possible with pure-admin-core. It's not typically something you'd expose to end users in production.

Production Architecture

In a real application, these settings would be handled differently:

App-level constants (hardcoded): theme, layout width, sidebar behavior — decided during development
User preferences (stored per-user): font size, compact mode — saved to user profile/database
Design decisions (not configurable): avatar visibility, icon-only tabs — part of your app's design

The SettingsPanel demonstrates runtime customization, but most apps would make these choices at build time or store them server-side.

Prerequisites: create a Phoenix project without Tailwind:

mix phx.new my_app --no-tailwind

If you have an existing project that uses Tailwind, remove the Tailwind dependency and its configuration before adding Pure Admin, as the two CSS frameworks will conflict.

Add keen_pure_admin to your mix.exs:

From Hex (recommended)

{:keen_pure_admin, "~> 1.0.0-rc.2"}

From GitHub

{:keen_pure_admin, github: "KeenMate/keen-pure-admin", tag: "v1.0.0-rc.2"}

After installation, replace Phoenix's CoreComponents with PureAdmin and set up the layout.

Replace CoreComponents import

In your MyAppWeb module, replace import MyAppWeb.CoreComponents with:
elixir
```
use PureAdmin.Components
```
Install a theme

Download a theme from pureadmin.io or use the Pure Admin CLI:
bash
```
npx @keenmate/pureadmin install audi
```

Set up the layout

<.navbar>
  <:start>
    <.navbar_burger />
    <.navbar_brand>My App</.navbar_brand>
  </:start>
</.navbar>

<.layout>
  <.layout_inner>
    <.sidebar>
      <.sidebar_item label="Dashboard" icon="fa-solid fa-gauge" href="/" />
    </.sidebar>
    <.layout_content>
      <.main>
        <%= @inner_content %>
      </.main>
    </.layout_content>
  </.layout_inner>
</.layout>

Register JS hooks

In your app.js:

import { PureAdminHooks } from "keen_pure_admin"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...PureAdminHooks }
})

Use components anywhere

<.card title_text="My Card">
  <.alert variant="info">Welcome to Pure Admin!</.alert>
  <.button variant="primary">Submit</.button>
</.card>

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

No FOUC. These are CSS classes set directly in your HTML markup — styles apply before first paint, unlike the JS-based settings panel approach.

Custom breakpoint? If you need a different mobile breakpoint, use a plain media query instead:

@media (max-width: 640px) {
  html { font-size: 12px; }
}

Pure Admin comes with 5 example themes that serve as starter packs for your own customization. Each theme demonstrates different color schemes and provides a foundation you can build upon.

These themes are visual examples to get you started quickly. For production, you will likely want to customize the CSS variables to match your brand identity.

Clean design with sharp contrasts. A good starting point for modern admin interfaces.

@keenmate/pure-admin-theme-audi

Traditional look with conservative colors. Starter for business-oriented applications.

@keenmate/pure-admin-theme-corporate

Dark mode example. Use as a base for building your own dark theme variant.

@keenmate/pure-admin-theme-dark

Bolder accent colors. Example of a more vibrant color palette.

@keenmate/pure-admin-theme-express

Subtle colors with reduced visual noise. Starting point for minimalist designs.

@keenmate/pure-admin-theme-minimal

The library includes 35+ components organized into logical categories:

Layout

Layout, LayoutInner, LayoutContent
Navbar, NavItem, NavDropdown
Sidebar, SidebarItem
Main, Footer

Forms

Input, Select, Textarea
Checkbox, Radio
SimpleForm, FormGroup
CheckboxList

Feedback

Alert, Callout
Toast, Flash
Modal, DialogService
Loader

Data Display

Table, TableResponsive
Card, Stat
Badge, BadgeGroup
Code, CodeBlock

Navigation

Tabs
CommandPalette
Pager
SettingsPanel

Interactive

Button, ButtonGroup
Tooltip, Popover
Popconfirm
Timeline

Explore the sidebar navigation to see detailed examples and documentation for each component.

Explore Components

Browse the Components Overview to see all available components with live examples.

CoreComponents Migration

See the CoreComponents Migration guide for a full mapping from Phoenix defaults.

New task assigned

Build completed

Server maintenance

Welcome to PureAdmin for Phoenix

About This Demo

About SettingsPanel

Installation

Basic Setup

Responsive Font Sizing

Shorthand (recommended)

Granular Control

Available Themes

Audi

Corporate

Dark

Express

Minimal

Component Overview

Layout

Forms

Feedback

Data Display

Navigation

Interactive

Next Steps

John Doe

Settings