Feedback
Notification, progress, and overlay components
Spinner
Animated loading indicator in 4 sizes
Progress
Linear progress bar with live server updates
CircularProgress
SVG ring indicator — value, size and color configurable
StepTracker
Multi-step wizard indicator — server controls active step
-
Account Create your account
-
2Profile Add your details
-
3Billing Payment information
-
4Review Confirm and submit
Alert
Inline status messages in 4 variants
Default Alert
This is a general-purpose informational alert.
Success
Your changes were saved successfully.
Warning
Please review your settings before continuing.
Error
Something went wrong. Please try again.
Toast
Transient pop-up notifications with auto-dismiss
Click a button to fire a toast.
Snackbar
Bulk-action bar triggered by selection state — slides up from bottom
Simulate selecting rows — the snackbar slides up with action buttons.
Sheet
Side panel overlay — uses PhiaDialog hook, press Escape or click backdrop to close
Dialog
Modal overlay with focus trap — Escape or backdrop closes it
AlertDialog
Destructive confirmation dialog — no accidental dismiss
AlertDialog is triggered programmatically — e.g. after a dangerous server action.
Drawer
Sliding panel from any screen edge — right and bottom variants
Command
Search command palette — type to filter, click to execute
HoverCard
Rich floating preview on hover with open/close delays
Tooltip
Hover or focus label for UI elements in 4 positions
Popover
Floating panel anchored to trigger — focus trap, Escape to close
DropdownMenu
Accessible menu with keyboard navigation (↑↓ Arrow, Enter, Escape)
ContextMenu
Right-click menu — try right-clicking the cards below
Carousel
Touch-swipeable image/card slider with prev/next navigation
Phoenix LiveView
Real-time UIs without writing JS
Tailwind CSS v4
CSS-first configuration and OKLCH colors
Lucide Icons
Beautiful open-source SVG icon library
PhiaUI
Component library built for the Elixir ecosystem
DarkModeToggle
PhiaDarkMode hook — toggles .dark class on html, persists to localStorage
Default size
Small
Large
Clicking toggles the page theme — the sun/moon icons swap via CSS dark: variant.
Sonner
Stacked toast notifications with 5 variants — hover to expand, auto-dismiss
Toasts appear bottom-right, stack on multiple fires, and auto-dismiss after 4s. Hover to expand stacked notifications.
Banner
Full-width page-level feedback strip — 5 variants, optionally dismissible
StatusIndicator
Colored presence dots — online, offline, away, busy, and more
BackTop
Scroll-to-top button — appears after scrolling 200px
Scroll down the page to reveal the BackTop button in the bottom-right corner.
It uses the PhiaBackTop JS hook.
FloatButton
Floating action button — speed-dial at bottom-left
Click the + button at the bottom-left of the viewport to expand the speed-dial actions. The FAB is positioned away from the BackTop button to avoid overlap.