Visual components for presenting data and content
Status labels and tags in multiple variants and sizes
Horizontal and vertical dividers with decorative/semantic modes
Horizontal (default)
Keyboard shortcut labels with monospaced styling
Server-side tab switching — default_value sets initial active panel
Component renders here
User initials with fallback and stacked group layouts
Avatar group (stacked)
Composed card with header, content, footer slots
Basic card with header and content
Card body content goes here. Cards can contain any HTML or component.
Card with action footer
Card content with a footer below.
Click-to-select option cards — great for plan pickers and preferences
Selected: pro
Order summary card with label/value rows
Order #1042
March 6, 2026
Vertical event sequence with status icons, rich content, and timestamps
Just now
Deployment completed
v0.1.16 is live in production
45 min ago
All tests passed
142 unit tests, 38 integration tests — 0 failures
2 hours ago
Build started
Triggered by push to main
3 hours ago
Code review approved
2 of 2 reviewers approved the changes
5 hours ago
Review requested
PR #247 — "feat: add activity feed component"
Yesterday
Branch created
feat/activity-feed from main
2 days ago
Build failed
3 tests failed in test/components/timeline_test.exs
Grouped activity log — 6 event types with icons, avatars, and timestamps
Hierarchical navigation trail with separator and current page
CSS-transition show/hide panel — trigger dispatches JS event, zero round-trip
Loading placeholders for deferred content
Collapsible sections — single or multiple open at once
Data table with sortable header, badges and actions
| Name | Role | Status | Joined |
|---|---|---|---|
| Alice Brown |
Admin
|
Active
|
Jan 2024 |
| Bob Chen |
Editor
|
Active
|
Feb 2024 |
| Carol Davis |
Viewer
|
Inactive
|
Mar 2024 |
| David Evans |
Editor
|
Pending
|
Apr 2024 |
Page navigation with prev/next links
Placeholder for empty collections with CTA
Try adjusting your search or filter to find what you're looking for.
Lucide SVG sprite icons — 3 sizes, composable with any component
Route-based link tabs in 3 visual variants — underline, pills, segment
Underline (default)
Pills
Segment
Hierarchical data with expand/collapse via native details/summary — zero JS
LTR/RTL wrapper — pure HTML dir attribute, no JS
LTR
Hello, World! — Left to right text direction.
RTL (Arabic)
مرحبا بالعالم — Right to left text direction.
Server-side SVG QR code generation — no JS, no CDN, inline SVG
Default
Custom colors + caption
skeleton_text, skeleton_avatar, skeleton_card — composite loading placeholders
skeleton_text
skeleton_avatar
skeleton_card
Styled overflow container — vertical, horizontal, both orientations
Vertical scroll
Horizontal scroll
CSS padding-top trick — maintains ratio at any container width
16:9
4:3
1:1
v0.1.16 Components
Chat UI components — message bubbles with role-based alignment
Text hierarchy — heading, text, lead, blockquote, inline_code, mark, overline, caption
This is a lead paragraph — larger, muted text perfect for article introductions.
Regular body text with highlighted content and
code snippets
inline.
"The best way to predict the future is to invent it." — Alan Kay
Styled code display block with optional language badge
defmodule MyApp.UserController do
use MyAppWeb, :controller
def show(conn, params) do
user = Accounts.get_user!(params["id"])
render(conn, :show, user: user)
end
end
Article content wrapper with semantic HTML and typographic rhythm
Mar 9, 2026 · 5 min read
Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. It leverages Elixir's concurrency model and Phoenix's channel layer to provide seamless interactivity without writing JavaScript.
With PhiaUI v0.1.16, you get 623 pre-built components that integrate natively with LiveView's event system, making it easy to build complex dashboards, forms, and data visualizations.