Modules
PhiaUI — a shadcn/ui-inspired component library for Phoenix LiveView.
OTP Application entry-point for PhiaUi.
Native Tailwind CSS class merger for PhiaUi.
ETS-backed cache for memoising resolved Tailwind class strings.
Maps Tailwind CSS utility class tokens to their conflict group.
Source of truth for all 119 PhiaUI components.
Accordion component using exclusively Phoenix.LiveView.JS — no JS hooks required.
Activity feed / audit log component for PhiaUI.
Inline feedback alert for communicating status, errors, and warnings.
Alert Dialog component for critical confirmations requiring explicit user action.
ArticleCard — a blog post / article preview card.
Utility component that maintains a fixed aspect ratio for any child content.
AudioPlayer component for playing audio with play/pause, progress bar and timestamp.
Circular user avatar with automatic image-fallback to initials.
AvatarGroup — an overlapping stack of avatars with built-in overflow badge.
BackTop component — a floating "scroll to top" button.
Compact inline label for status indicators, tags, version numbers, and counts.
Month calendar where each day cell can show a small badge count at the top and the day number at the bottom.
Full-page monthly calendar with colored event pills and a view switcher.
Airbnb-style booking calendar with per-cell availability states.
BottomNavigation component — a fixed bottom tab bar for mobile/PWA apps.
Breadcrumb navigation component following the shadcn/ui Breadcrumb anatomy.
BulkActionBar component for PhiaUI.
Stateless Button component with 6 variants and 7 sizes.
Groups multiple buttons into a unified bar with shared borders.
Server-rendered calendar component for date selection with keyboard navigation.
Calendar + scrollable time slot picker for date-and-time selection.
Week-view calendar with time axis and absolute-positioned event blocks.
Composable Card component with 6 independent sub-components.
Carousel component with touch swipe, button navigation, and keyboard support.
Chart integration component powered by the PhiaChart vanilla JS hook.
Titled card container for charts and data visualisations.
Chat interface components for PhiaUI.
Native HTML checkbox component styled with Tailwind CSS.
Interactive Chip component for tags, filters, and multi-select interfaces.
Radial/circular progress indicator rendered as an SVG arc.
Collapsible section component using exclusively Phoenix.LiveView.JS — no JS hooks required.
Color picker component with native <input type="color">, optional swatches,
and a live value display.
Color block + name + hex value + optional copy button.
Combobox component with search/filter for PhiaUI.
Command palette component powered by the PhiaCommand vanilla JavaScript hook.
Context menu component triggered by right-click (contextmenu browser event).
Copy-to-clipboard button component powered by the PhiaCopyButton vanilla JS hook.
Display-only countdown timer widget rendered in two variants.
Call-to-action card: illustration/icon + headline + description + CTA buttons.
DailyAgenda — daily schedule view with a large day header, compact week strip, and an event list with dotted separators.
Dark mode toggle button component powered by the PhiaDarkMode vanilla JS hook.
Feature-rich data table with server-side sorting, pagination, toolbar, column visibility toggling, and row selection — all stateless.
DateCard component — a single selectable day card showing the day number and short weekday abbreviation.
Form-aware standalone date input component for Phoenix LiveView.
Date picker component that composes Calendar and a popover-style dropdown.
Date range picker with dual-calendar server-side rendering.
Preset date range picker with sidebar shortcuts and a calendar grid.
DateStrip — a horizontal scrollable strip of day cards (week selector).
Date-and-time selection input — styled native <input type="datetime-local">.
Accessible Dialog (Modal) component following the WAI-ARIA Dialog pattern.
Text direction utility component for LTR and RTL content.
Drawer component — a sliding panel that enters from any edge of the screen.
Dropdown menu component with smart positioning, click-outside detection, and full WAI-ARIA keyboard navigation.
Inline-editable field component — click to edit, Enter to submit, Escape to cancel.
Empty state component for displaying when a list, table, or view has no data.
Full-month event calendar with colored event badges per day.
Card component for displaying an event with a date badge, time, location, attendee avatars, and optional actions slot.
Icon + title + description — the standard landing page feature block.
Standalone field layout primitives for composing form fields without Phoenix.HTML.FormField.
File attachment card with type-based icon and color coding.
File upload component for PhiaUI.
FilterBar component for PhiaUI.
FilterBuilder component for PhiaUI.
Floating Action Button (FAB) component with optional speed-dial.
Form Integration Components for Phoenix LiveView.
Composable form field wrapper for Phoenix LiveView.
Week-view calendar (Google Calendar style) with hourly time slots.
Semi-circular (180°) SVG gauge chart.
Heatmap calendar grid component for PhiaUI.
HoverCard component — a rich floating panel revealed on hover with configurable delays.
Inline SVG icon component backed by a Lucide icon sprite file.
Hero image (top-cover) + card content below.
Image upload component for PhiaUI.
Form-aware text input component integrating with Phoenix.HTML.FormField.
InputAddon component — wraps an input with optional prefix and suffix decorators.
One-time password (OTP) input component with individual digit slots.
Kanban board component for PhiaUI.
Keyboard shortcut display component.
Accessible label component for form inputs.
Semantic HTML wrapper component with configurable element tag.
Centers content both horizontally and vertically.
Max-width content constrainer with responsive size presets.
Semantic <dl>/<dt>/<dd> key-value display component.
Enhanced separator with optional centered text label.
Fixed-positioned bar anchored to the top or bottom of the viewport.
Full flexbox control component.
CSS Grid container with column, row, gap and auto-flow control.
CSS columns masonry grid — items flow top-to-bottom in columns like a
Pinterest board or photo wall.
Classic media-object layout: a fixed media element (image/icon/avatar) alongside a flexible body content block.
Vertical navigation list with groups, icons, nested subnav, and active state.
Page title bar with breadcrumb, title, description, and actions slots.
Full-page layout composition: header / pane (sidebar) / main / footer slots.
Semantic <section> wrapper with size-based vertical padding.
Auto-responsive equal-width grid — no manual breakpoints required.
Flex spacer that grows to fill remaining space in a flex container.
Two-column layout: a fixed-width pane alongside flexible main content.
Vertical or horizontal flex stack with consistent gap.
Sticky-positioned container that adheres to the top or bottom of the viewport as the user scrolls.
Flex-wrap container for tags, chips, and button groups.
Card component for displaying a link preview with title, description, image, favicon, site name, and domain. Supports :default, :compact, and :minimal variants.
Mention input component for PhiaUI.
Menubar component — a horizontal bar of menus for application-level navigation.
Responsive CSS Grid wrapper for stat_card/1 KPI widgets.
Mobile hamburger button that toggles the sidebar via Phoenix.LiveView.JS.
Month selection input — styled native <input type="month">.
Airbnb-style multi-month calendar showing 2 or 3 months side by side.
Multi-select form component for Phoenix LiveView.
A full-month calendar grid where multiple individual (non-contiguous) dates can be toggled on/off.
Horizontal navigation menu with optional dropdown panels.
Notification/alert card with type-based color coding and dismiss support.
Numeric stepper input component with optional prefix/suffix and form integration.
Pagination navigation component for paginating large data sets.
Password input with a visibility toggle button.
Form-aware standalone input component for Phoenix LiveView.
Popover component powered by the PhiaPopover vanilla JavaScript hook.
Pricing plan card for displaying subscription tiers.
E-commerce product card with image, rating, pricing, and add-to-cart action.
ProfileCard — a user profile display card with avatar, name, role, status, and slots.
Linear progress bar for displaying completion of a task or process.
Card component that displays a titled progress bar with optional description, value label, variant coloring, size, icon slot, and footer slot.
QrCode component — server-side SVG QR code generation.
Mutually-exclusive radio button group component for Phoenix LiveView.
A full-month calendar grid with range selection visualised as a continuous band.
Star Rating component for PhiaUI.
Ticket/receipt styled card with a perforated CSS divider.
Drag-to-resize split panel component.
Rich text editor component for PhiaUI.
ScheduleEventCard component — an event card with a colored left border, title, date/time range, optional avatar group, and a category badge.
Calendly-style availability schedule grid.
ScrollArea component — a styled, accessible scrollable container. Zero JavaScript.
Segmented control component for Phoenix LiveView.
Native HTML select form component for Phoenix LiveView.
SelectableCard component — a card that acts as a radio button for visually rich option selection.
Thin divider line for separating content regions.
Sheet component — a sliding side panel that enters from any edge of the screen.
Full-height application shell with a responsive sidebar and topbar.
Sidebar navigation component with brand area, scrollable nav, and pinned footer.
Animated loading placeholder components (shimmer / skeleton screens).
Range slider component for continuous numeric value selection.
Floating bottom action bar for bulk-selection feedback.
Sonner-style toast notification component powered by the PhiaSonner vanilla
JavaScript hook.
Compact metric card with an inline SVG sparkline.
Animated loading spinner component.
Dashboard KPI widget built on top of the Card and Badge primitives.
Multi-step progress indicator (stepper / wizard) component.
Duolingo/Fitbit-style habit streak calendar.
Accessible on/off switch component for Phoenix LiveView.
Composable table component following the shadcn/ui anatomy.
Accessible content-switching Tabs component — fully server-rendered.
Horizontal tab navigation component for page-level and section-level routing.
Tags input component for PhiaUI.
TeamCard — displays a team member with avatar, name, role, department, email, and optional badge/action slots.
TestimonialCard — a customer quote card with author info, optional star rating, and three layout variants.
Multi-line textarea form component for Phoenix LiveView.
Scoped CSS theme provider using a CSS-first, data-attribute approach.
Time selection input — styled native <input type="time">.
TimeSliderPicker — horizontal time ruler/scrubber display.
TimeSlotGrid component — a responsive grid of time-slot buttons for appointment booking.
TimeSlotList component — a vertical scrollable list of time slots with an optional AM/PM toggle.
Vertical timeline / activity feed component.
Toast notification component powered by the PhiaToast vanilla JavaScript hook.
Pressable toggle button component with aria-pressed semantics.
Coordinated group of toggle buttons for single or multi-select interactions.
Toolbar component — a horizontal row of action buttons with separators and groups.
Tooltip component powered by the PhiaTooltip vanilla JavaScript hook.
Standalone sticky top navigation bar (h-14, border-b, bg-background).
Tree component for displaying hierarchical data with expandable/collapsible nodes.
Uptime status bar — a row of colored segments indicating service health over time.
WeekCalendar — compact week navigator with prev/next header and day strip.
WeekDayPicker — a compact horizontal day-of-week selector.
Week selection input — styled native <input type="week">.
Drum roll / iOS-style scroll wheel picker component.
Year selection input — styled <input type="number"> scoped to year ranges.
Static linter that enforces the PhiaUI theming contract on component templates.
Theme definition struct and API for PhiaUI.
Generates CSS custom property declarations from a %PhiaUi.Theme{} struct.
The Blue color preset — enterprise blue with a vibrant primary.
Green preset — success green.
Neutral preset — pure grey.
Orange preset — energetic orange.
The Rose color preset — modern rose/pink, warm and expressive.
The Slate color preset — cool blue-grey.
Violet preset — premium violet.
The Zinc color preset — neutral dark, the shadcn/ui default.
Mix Tasks
Ejects a PhiaUI component into the current Phoenix project as an editable source file.
Generates the Lucide SVG sprite used by PhiaUi.Components.Icon.
Sets up PhiaUI in the current Phoenix project.
Manage PhiaUI color theme presets from the command line.
Removes all DaisyUI references from a Phoenix LiveView project.