PureAdmin replaces Phoenix's generated CoreComponents module.
This page shows what's replaced, what's new, and how to handle the migration.
Migration Overview
Replace
import MyAppWeb.CoreComponents with use PureAdmin.Components
in your html_helpers/0 function. All replaced functions keep the same name and
similar signatures, so most templates work without changes.
| CoreComponents function | PureAdmin replacement | Status |
|---|---|---|
button/1 |
PureAdmin.Components.Button.button/1 |
Replaced |
input/1 |
PureAdmin.Components.Form.input/1
— accepts field={@form[:x]} the same way CoreComponents does; auto-renders
error help. Same treatment on textarea/1, select/1,
checkbox/1, radio/1, and form_group/1.
|
Replaced |
simple_form/1 |
PureAdmin.Components.Form.simple_form/1 |
Replaced |
modal/1 |
PureAdmin.Components.Modal.modal/1 |
Replaced |
table/1 |
PureAdmin.Components.Table.table/1 |
Replaced |
list/1 |
PureAdmin.Components.List.list/1 |
Replaced |
label/1 |
PureAdmin.Components.Badge.label/1 |
Replaced |
flash/1, flash_group/1 |
PureAdmin.Components.Flash
— see Flash Messages
|
Replaced |
header/1 |
Page title via @page_title in <.navbar_title> (layout renders it, LiveView sets it) |
Not needed |
icon/1 |
Use Font Awesome directly: <i class="fa-solid fa-..."> |
Manual |
show/1, hide/1 |
Use Phoenix.LiveView.JS.show/1 and JS.hide/1 directly (thin wrappers, not needed) |
Not needed |
translate_error/1 |
PureAdmin.Components.Form.translate_error/1 ships a plain
%{key}-interpolating default. For Gettext, point
config :keen_pure_admin, :error_formatter at your app's
translate_error/1 (see form.ex moduledoc).
|
Replaced |
Setup Steps
-
Create project without Tailwind
mix phx.new my_app --no-tailwind
-
Add dependency
{:keen_pure_admin, "~> 1.0"} -
Replace CoreComponents import
# In your MyAppWeb module, replace: # import MyAppWeb.CoreComponents # With: use PureAdmin.Components
-
Add translate_error/1
PureAdmin does not include
translate_error/1since it depends on your app's Gettext configuration. Copy it from the generated CoreComponents or define your own. -
Replace icon references
CoreComponents uses Heroicons via
<.icon name="hero-..." />. PureAdmin uses Font Awesome:<i class="fa-solid fa-..."></i>.