A Phoenix LiveView component library — ready to use, no reinventing the wheel.
What is it?
PtahUI is a component library for Phoenix LiveView built with Tailwind CSS and Heroicons.
The name comes from Ptah, the Egyptian god of craftsmen, architects, and creation — a reference to the act of building interfaces by hand.
The library provides 30+ ready-to-use, composable components, highly configurable via attributes, eliminating the need to write repetitive HTML and CSS across every Phoenix project.
Why was it built?
In Phoenix LiveView projects, we always end up writing the same buttons, modals, tables, and forms over and over. Each one slightly different, but never different enough to justify the repetition.
PtahUI was born from this frustration: a solid base of reusable components that:
- Don't hardcode colours — all components expose class attributes so colours adapt to each project's design.
- Work natively with LiveView — no extra JavaScript, no artificial wrappers.
- Are composable — slots, global attributes, and variants cover real-world use cases without needing to fork the component.
- Save time — one
use PtahUiinmy_app_web.exand all components are available.
Prerequisites
ptah_ui uses Heroicons via CSS classes generated by Tailwind (e.g. hero-arrow-right). In a Phoenix project generated with mix phx.new this is already configured by default. If not, add to your project's mix.exs:
{:heroicons,
github: "tailwindlabs/heroicons",
tag: "v2.1.1",
sparse: "optimized",
app: false,
compile: false,
depth: 1}Installation
Add to mix.exs:
def deps do
[
{:ptah_ui, "~> 0.1"}
]
endIn your my_app_web.ex, inside html_helpers/0:
defp html_helpers do
quote do
use PtahUi
# ...
end
endAvailable components
| Component | Description |
|---|---|
alert/1 | Info, success, warning and error alerts |
avatar/1 | Avatar with image or generated initials |
banner/1 | Highlight banners for the top of a page |
button/1 | General-purpose button with primary, secondary, danger, ghost variants |
navigate_button/1 | Pill-shaped navigation button with icon |
action_button/1 | Wide CTA button with title, subtitle and icon |
backoffice_button/1 | Compact button for admin/backoffice UIs |
primary_button/1 | Primary action button with icon |
secondary_button/1 | Secondary button with configurable icon position |
card/1 · badge/1 | Card with header/footer slots and status badge |
calendar/1 | Interactive date picker |
carousel/1 | Content carousel |
checkbox/1 | Styled checkbox |
countdown/1 | Real-time countdown timer |
divider/1 | Horizontal/vertical separator |
dock/1 | macOS-style navigation dock |
dropdown/1 | Dropdown menu with selectable items |
fab/1 | Floating Action Button |
filter/1 | Filter component for lists |
a/1 | Flexible link (navigate/patch/href) |
input/1 · select/1 | Form fields with label and error display |
hover_gallery/1 | Image gallery with hover effect |
icon/1 | Heroicons with configurable size and colour |
image_uploader/1 · cv_upload/1 | Image and file upload |
indicator/1 | Status dot (online, offline, etc.) |
info_display/1 | Key-value data display row |
label/1 | Coloured tag/label |
loading/1 · skeleton/1 | Loading states and content placeholders |
modal/1 | Modal with animation and focus management |
pagination/1 | Table and list pagination |
progress/1 | Progress bar |
rating/1 | Star rating |
steps/1 | Step indicator / wizard progress |
swap/1 | Visual toggle between two states |
table/1 | Table with configurable columns and row actions |
table_search/1 | Real-time search for tables |
tabs/1 | Tab navigation |
text_rotate/1 | Text with rotation animation |
timeline/1 | Vertical/horizontal timeline |
toggle/1 | Styled on/off switch |
tooltip/1 | Tooltip with configurable positioning |
Usage example
<.button variant="primary" loading={@saving} phx-click="save">
Save
</.button>
<.card>
<:header>
<h2 class="font-semibold text-gray-900">Title</h2>
</:header>
Card content.
<:footer>
<.button size="sm">Confirm</.button>
</:footer>
</.card>
<.modal id="confirm-modal">
<p>Are you sure?</p>
</.modal>Development
The repository includes a demo application (ptah_ui_demo) that showcases all components in a real context:
cd ptah_ui_demo
mix deps.get
mix phx.server
Open http://localhost:4000 to browse the component storybook.
License
MIT — free to use, modify and distribute.