# phia_ui v0.1.5 - Table of Contents

## Pages

- [PhiaUI](readme.md)
- [Changelog](changelog.md)
- [LICENSE](license.md)

- Guides
  - [Theme System Guide](theme-system.md)
  - [Tutorial: Booking Platform](tutorial-booking.md)
  - [Tutorial: Content Management System](tutorial-cms.md)
  - [Tutorial: Analytics Dashboard](tutorial-dashboard.md)

- Components
  - [Buttons](buttons.md)
  - [Calendar & Scheduling](calendar.md)
  - [Cards](cards.md)
  - [Data](data.md)
  - [Display](display.md)
  - [Feedback](feedback.md)
  - [Forms](forms.md)
  - [Inputs](inputs.md)
  - [Layout](layout.md)
  - [Media](media.md)
  - [Navigation](navigation.md)
  - [Overlay](overlay.md)

## Modules

- [PhiaUi](PhiaUi.md): PhiaUI — a shadcn/ui-inspired component library for Phoenix LiveView.
- [PhiaUi.Application](PhiaUi.Application.md): OTP Application entry-point for PhiaUi.
- [PhiaUi.ClassMerger](PhiaUi.ClassMerger.md): Native Tailwind CSS class merger for PhiaUi.
- [PhiaUi.ClassMerger.Cache](PhiaUi.ClassMerger.Cache.md): ETS-backed cache for memoising resolved Tailwind class strings.
- [PhiaUi.ClassMerger.Groups](PhiaUi.ClassMerger.Groups.md): Maps Tailwind CSS utility class tokens to their conflict group.
- [PhiaUi.ComponentRegistry](PhiaUi.ComponentRegistry.md): Source of truth for all 119 PhiaUI components.
- [PhiaUi.Components.Accordion](PhiaUi.Components.Accordion.md): Accordion component using exclusively `Phoenix.LiveView.JS` — no JS hooks required.
- [PhiaUi.Components.ActivityFeed](PhiaUi.Components.ActivityFeed.md): Activity feed / audit log component for PhiaUI.
- [PhiaUi.Components.Alert](PhiaUi.Components.Alert.md): Inline feedback alert for communicating status, errors, and warnings.
- [PhiaUi.Components.AlertDialog](PhiaUi.Components.AlertDialog.md): Alert Dialog component for critical confirmations requiring explicit user action.
- [PhiaUi.Components.AspectRatio](PhiaUi.Components.AspectRatio.md): Utility component that maintains a fixed aspect ratio for any child content.
- [PhiaUi.Components.AudioPlayer](PhiaUi.Components.AudioPlayer.md): AudioPlayer component for playing audio with play/pause, progress bar and timestamp.
- [PhiaUi.Components.Avatar](PhiaUi.Components.Avatar.md): Circular user avatar with automatic image-fallback to initials.
- [PhiaUi.Components.AvatarGroup](PhiaUi.Components.AvatarGroup.md): AvatarGroup — an overlapping stack of avatars with built-in overflow badge.
- [PhiaUi.Components.BackTop](PhiaUi.Components.BackTop.md): BackTop component — a floating "scroll to top" button.
- [PhiaUi.Components.Badge](PhiaUi.Components.Badge.md): Compact inline label for status indicators, tags, version numbers, and counts.
- [PhiaUi.Components.BadgeCalendar](PhiaUi.Components.BadgeCalendar.md): Month calendar where each day cell can show a small badge count at the top
and the day number at the bottom.
- [PhiaUi.Components.BigCalendar](PhiaUi.Components.BigCalendar.md): Full-page monthly calendar with colored event pills and a view switcher.
- [PhiaUi.Components.BookingCalendar](PhiaUi.Components.BookingCalendar.md): Airbnb-style booking calendar with per-cell availability states.
- [PhiaUi.Components.BottomNavigation](PhiaUi.Components.BottomNavigation.md): BottomNavigation component — a fixed bottom tab bar for mobile/PWA apps.
- [PhiaUi.Components.Breadcrumb](PhiaUi.Components.Breadcrumb.md): Breadcrumb navigation component following the shadcn/ui Breadcrumb anatomy.
- [PhiaUi.Components.BulkActionBar](PhiaUi.Components.BulkActionBar.md): BulkActionBar component for PhiaUI.
- [PhiaUi.Components.Button](PhiaUi.Components.Button.md): Stateless Button component with 6 variants and 7 sizes.
- [PhiaUi.Components.ButtonGroup](PhiaUi.Components.ButtonGroup.md): Groups multiple buttons into a unified bar with shared borders.
- [PhiaUi.Components.Calendar](PhiaUi.Components.Calendar.md): Server-rendered calendar component for date selection with keyboard navigation.
- [PhiaUi.Components.CalendarTimePicker](PhiaUi.Components.CalendarTimePicker.md): Calendar + scrollable time slot picker for date-and-time selection.
- [PhiaUi.Components.CalendarWeekView](PhiaUi.Components.CalendarWeekView.md): Week-view calendar with time axis and absolute-positioned event blocks.
- [PhiaUi.Components.Card](PhiaUi.Components.Card.md): Composable Card component with 6 independent sub-components.
- [PhiaUi.Components.Carousel](PhiaUi.Components.Carousel.md): Carousel component with touch swipe, button navigation, and keyboard support.
- [PhiaUi.Components.Chart](PhiaUi.Components.Chart.md): Chart integration component powered by the `PhiaChart` vanilla JS hook.
- [PhiaUi.Components.ChartShell](PhiaUi.Components.ChartShell.md): Titled card container for charts and data visualisations.
- [PhiaUi.Components.ChatMessage](PhiaUi.Components.ChatMessage.md): Chat interface components for PhiaUI.
- [PhiaUi.Components.Checkbox](PhiaUi.Components.Checkbox.md): Native HTML checkbox component styled with Tailwind CSS.
- [PhiaUi.Components.Chip](PhiaUi.Components.Chip.md): Interactive Chip component for tags, filters, and multi-select interfaces.
- [PhiaUi.Components.CircularProgress](PhiaUi.Components.CircularProgress.md): Radial/circular progress indicator rendered as an SVG arc.
- [PhiaUi.Components.Collapsible](PhiaUi.Components.Collapsible.md): Collapsible section component using exclusively `Phoenix.LiveView.JS` — no JS hooks required.
- [PhiaUi.Components.ColorPicker](PhiaUi.Components.ColorPicker.md): Color picker component with native `<input type="color">`, optional swatches,
and a live value display.
- [PhiaUi.Components.Combobox](PhiaUi.Components.Combobox.md): Combobox component with search/filter for PhiaUI.
- [PhiaUi.Components.Command](PhiaUi.Components.Command.md): Command palette component powered by the `PhiaCommand` vanilla JavaScript hook.
- [PhiaUi.Components.ContextMenu](PhiaUi.Components.ContextMenu.md): Context menu component triggered by right-click (`contextmenu` browser event).
- [PhiaUi.Components.CopyButton](PhiaUi.Components.CopyButton.md): Copy-to-clipboard button component powered by the `PhiaCopyButton` vanilla JS hook.
- [PhiaUi.Components.CountdownTimer](PhiaUi.Components.CountdownTimer.md): Display-only countdown timer widget rendered in two variants.
- [PhiaUi.Components.DailyAgenda](PhiaUi.Components.DailyAgenda.md): DailyAgenda — daily schedule view with a large day header, compact week strip,
and an event list with dotted separators.
- [PhiaUi.Components.DarkModeToggle](PhiaUi.Components.DarkModeToggle.md): Dark mode toggle button component powered by the `PhiaDarkMode` vanilla JS hook.
- [PhiaUi.Components.DataGrid](PhiaUi.Components.DataGrid.md): Feature-rich data table with server-side sorting, pagination, toolbar,
column visibility toggling, and row selection — all stateless.
- [PhiaUi.Components.DateCard](PhiaUi.Components.DateCard.md): DateCard component — a single selectable day card showing the day number and
short weekday abbreviation.
- [PhiaUi.Components.DateField](PhiaUi.Components.DateField.md): Form-aware standalone date input component for Phoenix LiveView.
- [PhiaUi.Components.DatePicker](PhiaUi.Components.DatePicker.md): Date picker component that composes `Calendar` and a popover-style dropdown.
- [PhiaUi.Components.DateRangePicker](PhiaUi.Components.DateRangePicker.md): Date range picker with dual-calendar server-side rendering.
- [PhiaUi.Components.DateRangePresets](PhiaUi.Components.DateRangePresets.md): Preset date range picker with sidebar shortcuts and a calendar grid.
- [PhiaUi.Components.DateStrip](PhiaUi.Components.DateStrip.md): DateStrip — a horizontal scrollable strip of day cards (week selector).
- [PhiaUi.Components.DateTimePicker](PhiaUi.Components.DateTimePicker.md): Date-and-time selection input — styled native `<input type="datetime-local">`.
- [PhiaUi.Components.Dialog](PhiaUi.Components.Dialog.md): Accessible Dialog (Modal) component following the WAI-ARIA Dialog pattern.
- [PhiaUi.Components.Direction](PhiaUi.Components.Direction.md): Text direction utility component for LTR and RTL content.
- [PhiaUi.Components.Drawer](PhiaUi.Components.Drawer.md): Drawer component — a sliding panel that enters from any edge of the screen.
- [PhiaUi.Components.DropdownMenu](PhiaUi.Components.DropdownMenu.md): Dropdown menu component with smart positioning, click-outside detection,
and full WAI-ARIA keyboard navigation.
- [PhiaUi.Components.Editable](PhiaUi.Components.Editable.md): Inline-editable field component — click to edit, Enter to submit, Escape to cancel.
- [PhiaUi.Components.EmptyState](PhiaUi.Components.EmptyState.md): Empty state component for displaying when a list, table, or view has no data.
- [PhiaUi.Components.EventCalendar](PhiaUi.Components.EventCalendar.md): Full-month event calendar with colored event badges per day.
- [PhiaUi.Components.Field](PhiaUi.Components.Field.md): Standalone field layout primitives for composing form fields without `Phoenix.HTML.FormField`.
- [PhiaUi.Components.FileUpload](PhiaUi.Components.FileUpload.md): File upload component for PhiaUI.
- [PhiaUi.Components.FilterBar](PhiaUi.Components.FilterBar.md): FilterBar component for PhiaUI.
- [PhiaUi.Components.FilterBuilder](PhiaUi.Components.FilterBuilder.md): FilterBuilder component for PhiaUI.
- [PhiaUi.Components.FloatButton](PhiaUi.Components.FloatButton.md): Floating Action Button (FAB) component with optional speed-dial.
- [PhiaUi.Components.Form](PhiaUi.Components.Form.md): Form Integration Components for Phoenix LiveView.
- [PhiaUi.Components.FormField](PhiaUi.Components.FormField.md): Composable form field wrapper for Phoenix LiveView.
- [PhiaUi.Components.GanttChart](PhiaUi.Components.GanttChart.md): Week-view calendar (Google Calendar style) with hourly time slots.
- [PhiaUi.Components.GaugeChart](PhiaUi.Components.GaugeChart.md): Semi-circular (180°) SVG gauge chart.
- [PhiaUi.Components.HeatmapCalendar](PhiaUi.Components.HeatmapCalendar.md): Heatmap calendar grid component for PhiaUI.
- [PhiaUi.Components.HoverCard](PhiaUi.Components.HoverCard.md): HoverCard component — a rich floating panel revealed on hover with configurable delays.
- [PhiaUi.Components.Icon](PhiaUi.Components.Icon.md): Inline SVG icon component backed by a Lucide icon sprite file.
- [PhiaUi.Components.ImageUpload](PhiaUi.Components.ImageUpload.md): Image upload component for PhiaUI.
- [PhiaUi.Components.Input](PhiaUi.Components.Input.md): Form-aware text input component integrating with `Phoenix.HTML.FormField`.
- [PhiaUi.Components.InputAddon](PhiaUi.Components.InputAddon.md): InputAddon component — wraps an input with optional prefix and suffix decorators.
- [PhiaUi.Components.InputOtp](PhiaUi.Components.InputOtp.md): One-time password (OTP) input component with individual digit slots.
- [PhiaUi.Components.KanbanBoard](PhiaUi.Components.KanbanBoard.md): Kanban board component for PhiaUI.
- [PhiaUi.Components.Kbd](PhiaUi.Components.Kbd.md): Keyboard shortcut display component.
- [PhiaUi.Components.Label](PhiaUi.Components.Label.md): Accessible label component for form inputs.
- [PhiaUi.Components.MentionInput](PhiaUi.Components.MentionInput.md): Mention input component for PhiaUI.
- [PhiaUi.Components.Menubar](PhiaUi.Components.Menubar.md): Menubar component — a horizontal bar of menus for application-level navigation.
- [PhiaUi.Components.MetricGrid](PhiaUi.Components.MetricGrid.md): Responsive CSS Grid wrapper for `stat_card/1` KPI widgets.
- [PhiaUi.Components.MobileSidebarToggle](PhiaUi.Components.MobileSidebarToggle.md): Mobile hamburger button that toggles the sidebar via `Phoenix.LiveView.JS`.
- [PhiaUi.Components.MonthPicker](PhiaUi.Components.MonthPicker.md): Month selection input — styled native `<input type="month">`.
- [PhiaUi.Components.MultiMonthCalendar](PhiaUi.Components.MultiMonthCalendar.md): Airbnb-style multi-month calendar showing 2 or 3 months side by side.
- [PhiaUi.Components.MultiSelect](PhiaUi.Components.MultiSelect.md): Multi-select form component for Phoenix LiveView.
- [PhiaUi.Components.MultiSelectCalendar](PhiaUi.Components.MultiSelectCalendar.md): A full-month calendar grid where multiple individual (non-contiguous) dates
can be toggled on/off.
- [PhiaUi.Components.NavigationMenu](PhiaUi.Components.NavigationMenu.md): Horizontal navigation menu with optional dropdown panels.
- [PhiaUi.Components.NumberInput](PhiaUi.Components.NumberInput.md): Numeric stepper input component with optional prefix/suffix and form integration.
- [PhiaUi.Components.Pagination](PhiaUi.Components.Pagination.md): Pagination navigation component for paginating large data sets.
- [PhiaUi.Components.PasswordInput](PhiaUi.Components.PasswordInput.md): Password input with a visibility toggle button.
- [PhiaUi.Components.PhiaInput](PhiaUi.Components.PhiaInput.md): Form-aware standalone input component for Phoenix LiveView.
- [PhiaUi.Components.Popover](PhiaUi.Components.Popover.md): Popover component powered by the `PhiaPopover` vanilla JavaScript hook.
- [PhiaUi.Components.Progress](PhiaUi.Components.Progress.md): Linear progress bar for displaying completion of a task or process.
- [PhiaUi.Components.QrCode](PhiaUi.Components.QrCode.md): QrCode component — server-side SVG QR code generation.
- [PhiaUi.Components.RadioGroup](PhiaUi.Components.RadioGroup.md): Mutually-exclusive radio button group component for Phoenix LiveView.
- [PhiaUi.Components.RangeCalendar](PhiaUi.Components.RangeCalendar.md): A full-month calendar grid with range selection visualised as a continuous
band.
- [PhiaUi.Components.Rating](PhiaUi.Components.Rating.md): Star Rating component for PhiaUI.
- [PhiaUi.Components.ReceiptCard](PhiaUi.Components.ReceiptCard.md): Ticket/receipt styled card with a perforated CSS divider.
- [PhiaUi.Components.Resizable](PhiaUi.Components.Resizable.md): Drag-to-resize split panel component.
- [PhiaUi.Components.RichTextEditor](PhiaUi.Components.RichTextEditor.md): Rich text editor component for PhiaUI.
- [PhiaUi.Components.ScheduleEventCard](PhiaUi.Components.ScheduleEventCard.md): ScheduleEventCard component — an event card with a colored left border, title,
date/time range, optional avatar group, and a category badge.
- [PhiaUi.Components.ScheduleView](PhiaUi.Components.ScheduleView.md): Calendly-style availability schedule grid.
- [PhiaUi.Components.ScrollArea](PhiaUi.Components.ScrollArea.md): ScrollArea component — a styled, accessible scrollable container. Zero JavaScript.
- [PhiaUi.Components.SegmentedControl](PhiaUi.Components.SegmentedControl.md): Segmented control component for Phoenix LiveView.
- [PhiaUi.Components.Select](PhiaUi.Components.Select.md): Native HTML select form component for Phoenix LiveView.
- [PhiaUi.Components.SelectableCard](PhiaUi.Components.SelectableCard.md): SelectableCard component — a card that acts as a radio button for visually rich option selection.
- [PhiaUi.Components.Separator](PhiaUi.Components.Separator.md): Thin divider line for separating content regions.
- [PhiaUi.Components.Sheet](PhiaUi.Components.Sheet.md): Sheet component — a sliding side panel that enters from any edge of the screen.
- [PhiaUi.Components.Shell](PhiaUi.Components.Shell.md): Full-height application shell with a responsive sidebar and topbar.
- [PhiaUi.Components.Sidebar](PhiaUi.Components.Sidebar.md): Sidebar navigation component with brand area, scrollable nav, and pinned footer.
- [PhiaUi.Components.Skeleton](PhiaUi.Components.Skeleton.md): Animated loading placeholder components (shimmer / skeleton screens).
- [PhiaUi.Components.Slider](PhiaUi.Components.Slider.md): Range slider component for continuous numeric value selection.
- [PhiaUi.Components.Snackbar](PhiaUi.Components.Snackbar.md): Floating bottom action bar for bulk-selection feedback.
- [PhiaUi.Components.Sonner](PhiaUi.Components.Sonner.md): Sonner-style toast notification component powered by the `PhiaSonner` vanilla
JavaScript hook.
- [PhiaUi.Components.SparklineCard](PhiaUi.Components.SparklineCard.md): Compact metric card with an inline SVG sparkline.
- [PhiaUi.Components.Spinner](PhiaUi.Components.Spinner.md): Animated loading spinner component.
- [PhiaUi.Components.StatCard](PhiaUi.Components.StatCard.md): Dashboard KPI widget built on top of the `Card` and `Badge` primitives.
- [PhiaUi.Components.StepTracker](PhiaUi.Components.StepTracker.md): Multi-step progress indicator (stepper / wizard) component.
- [PhiaUi.Components.StreakCalendar](PhiaUi.Components.StreakCalendar.md): Duolingo/Fitbit-style habit streak calendar.
- [PhiaUi.Components.Switch](PhiaUi.Components.Switch.md): Accessible on/off switch component for Phoenix LiveView.
- [PhiaUi.Components.Table](PhiaUi.Components.Table.md): Composable table component following the shadcn/ui anatomy.
- [PhiaUi.Components.Tabs](PhiaUi.Components.Tabs.md): Accessible content-switching Tabs component — fully server-rendered.
- [PhiaUi.Components.TabsNav](PhiaUi.Components.TabsNav.md): Horizontal tab navigation component for page-level and section-level routing.
- [PhiaUi.Components.TagsInput](PhiaUi.Components.TagsInput.md): Tags input component for PhiaUI.
- [PhiaUi.Components.Textarea](PhiaUi.Components.Textarea.md): Multi-line textarea form component for Phoenix LiveView.
- [PhiaUi.Components.ThemeProvider](PhiaUi.Components.ThemeProvider.md): Scoped CSS theme provider using a CSS-first, data-attribute approach.
- [PhiaUi.Components.TimePicker](PhiaUi.Components.TimePicker.md): Time selection input — styled native `<input type="time">`.
- [PhiaUi.Components.TimeSliderPicker](PhiaUi.Components.TimeSliderPicker.md): TimeSliderPicker — horizontal time ruler/scrubber display.
- [PhiaUi.Components.TimeSlotGrid](PhiaUi.Components.TimeSlotGrid.md): TimeSlotGrid component — a responsive grid of time-slot buttons for appointment booking.
- [PhiaUi.Components.TimeSlotList](PhiaUi.Components.TimeSlotList.md): TimeSlotList component — a vertical scrollable list of time slots with an optional AM/PM toggle.
- [PhiaUi.Components.Timeline](PhiaUi.Components.Timeline.md): Vertical timeline / activity feed component.
- [PhiaUi.Components.Toast](PhiaUi.Components.Toast.md): Toast notification component powered by the `PhiaToast` vanilla JavaScript hook.
- [PhiaUi.Components.Toggle](PhiaUi.Components.Toggle.md): Pressable toggle button component with `aria-pressed` semantics.
- [PhiaUi.Components.ToggleGroup](PhiaUi.Components.ToggleGroup.md): Coordinated group of toggle buttons for single or multi-select interactions.
- [PhiaUi.Components.Toolbar](PhiaUi.Components.Toolbar.md): Toolbar component — a horizontal row of action buttons with separators and groups.
- [PhiaUi.Components.Tooltip](PhiaUi.Components.Tooltip.md): Tooltip component powered by the `PhiaTooltip` vanilla JavaScript hook.
- [PhiaUi.Components.Topbar](PhiaUi.Components.Topbar.md): Standalone sticky top navigation bar (h-14, border-b, bg-background).
- [PhiaUi.Components.Tree](PhiaUi.Components.Tree.md): Tree component for displaying hierarchical data with expandable/collapsible nodes.
- [PhiaUi.Components.UptimeBar](PhiaUi.Components.UptimeBar.md): Uptime status bar — a row of colored segments indicating service health over time.
- [PhiaUi.Components.WeekCalendar](PhiaUi.Components.WeekCalendar.md): WeekCalendar — compact week navigator with prev/next header and day strip.
- [PhiaUi.Components.WeekDayPicker](PhiaUi.Components.WeekDayPicker.md): WeekDayPicker — a compact horizontal day-of-week selector.
- [PhiaUi.Components.WeekPicker](PhiaUi.Components.WeekPicker.md): Week selection input — styled native `<input type="week">`.
- [PhiaUi.Components.WheelPicker](PhiaUi.Components.WheelPicker.md): Drum roll / iOS-style scroll wheel picker component.
- [PhiaUi.Components.YearPicker](PhiaUi.Components.YearPicker.md): Year selection input — styled `<input type="number">` scoped to year ranges.
- [PhiaUi.TemplateLinter](PhiaUi.TemplateLinter.md): Static linter that enforces the PhiaUI theming contract on component templates.
- [PhiaUi.Theme](PhiaUi.Theme.md): Theme definition struct and API for PhiaUI.
- [PhiaUi.ThemeCSS](PhiaUi.ThemeCSS.md): Generates CSS custom property declarations from a `%PhiaUi.Theme{}` struct.
- [PhiaUi.Themes.Blue](PhiaUi.Themes.Blue.md): The **Blue** color preset — enterprise blue with a vibrant primary.
- [PhiaUi.Themes.Green](PhiaUi.Themes.Green.md): Green preset — success green.
- [PhiaUi.Themes.Neutral](PhiaUi.Themes.Neutral.md): Neutral preset — pure grey.
- [PhiaUi.Themes.Orange](PhiaUi.Themes.Orange.md): Orange preset — energetic orange.
- [PhiaUi.Themes.Rose](PhiaUi.Themes.Rose.md): The **Rose** color preset — modern rose/pink, warm and expressive.
- [PhiaUi.Themes.Slate](PhiaUi.Themes.Slate.md): The **Slate** color preset — cool blue-grey.
- [PhiaUi.Themes.Violet](PhiaUi.Themes.Violet.md): Violet preset — premium violet.
- [PhiaUi.Themes.Zinc](PhiaUi.Themes.Zinc.md): The **Zinc** color preset — neutral dark, the shadcn/ui default.

## Mix Tasks

- [mix phia.add](Mix.Tasks.Phia.Add.md): Ejects a PhiaUI component into the current Phoenix project as an editable
source file.
- [mix phia.icons](Mix.Tasks.Phia.Icons.md): Generates the Lucide SVG sprite used by `PhiaUi.Components.Icon`.
- [mix phia.install](Mix.Tasks.Phia.Install.md): Sets up PhiaUI in the current Phoenix project.
- [mix phia.theme](Mix.Tasks.Phia.Theme.md): Manage PhiaUI color theme presets from the command line.
- [mix phia.undaisy](Mix.Tasks.Phia.Undaisy.md): Removes all DaisyUI references from a Phoenix LiveView project.