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 |
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 |
Keep your app's implementation or copy from CoreComponents | Manual |
Setup Steps
-
Create project without Tailwindbash
mix phx.new my_app --no-tailwind -
Add dependencyelixir
{:keen_pure_admin, "~> 1.0.0-rc.2"} -
Replace CoreComponents importelixir
# 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>.