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.

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.

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.

Prerequisites: create a Phoenix project without Tailwind:

mix phx.new my_app --no-tailwind

Add keen_pure_admin to your mix.exs:

{:keen_pure_admin, "~> 1.0"}

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

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

• Reemplazar la importación de CoreComponents

  In your MyAppWeb module, replace import MyAppWeb.CoreComponents with:

  use PureAdmin.Components

• Instalar un tema

  Download a theme from pureadmin.io or use the Pure Admin CLI:

  npx @keenmate/pureadmin install audi

• Configura el diseño

  <.navbar>
    <:burger><.navbar_burger /></:burger>
    <:start>
      <.app_header>My App</.app_header>
    </: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>
  

• Registrar hooks de JS

  In your app.js:

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

• Usa componentes en cualquier lugar

  <.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.

Forma abreviada (recomendada)

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) -->

Control granular

Pick exact sizes for desktop and mobile independently:

<html class="pa-font-base-10 pa-font-mobile-12">

@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.

The library includes 35+ components organized into logical categories:

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