# phia_ui v0.1.17 - Table of Contents

## Pages

- [README](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)
  - [Tutorial: PhiaUI in Livebook](tutorial-livebook.md)
  - [Tutorial: Charts — Complete Guide](tutorial-charts.md)
  - [Tutorial: PhiaUI Design — Visual Editor + Claude Code](tutorial-design.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)
  - [Animation](animation.md)
  - [Background](background.md)
  - [Editor](editor.md)
  - [Interaction](interaction.md)
  - [Surface](surface.md)
  - [Typography](typography.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.Collab.CollabPresence](PhiaUi.Collab.CollabPresence.md): Phoenix.Presence wrapper for collaborative editing sessions.
- [PhiaUi.Collab.CollabRoom](PhiaUi.Collab.CollabRoom.md): GenServer managing a single collaboration room session.
- [PhiaUi.Collab.RoomManager](PhiaUi.Collab.RoomManager.md): Manages collaboration room lifecycles via `DynamicSupervisor`.
- [PhiaUi.Collab.Supervisor](PhiaUi.Collab.Supervisor.md): Top-level supervisor for PhiaUI collaboration infrastructure.
- [PhiaUi.ComponentRegistry](PhiaUi.ComponentRegistry.md): Source of truth for all 829 PhiaUI components.
- [PhiaUi.Components.Accordion](PhiaUi.Components.Accordion.md): Accordion component using exclusively `Phoenix.LiveView.JS` — no JS hooks required.
- [PhiaUi.Components.ActionButton](PhiaUi.Components.ActionButton.md): Specialized action buttons for common UI interaction patterns.
- [PhiaUi.Components.ActionSheet](PhiaUi.Components.ActionSheet.md): Mobile-style action sheet component — a sliding bottom panel.
- [PhiaUi.Components.ActivityFeed](PhiaUi.Components.ActivityFeed.md): Activity feed / audit log component for PhiaUI.
- [PhiaUi.Components.AdvancedSelects](PhiaUi.Components.AdvancedSelects.md): Advanced select components 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.AnimatedSurface](PhiaUi.Components.AnimatedSurface.md): Animated surface components for PhiaUI — 5 components covering rotating
border beams, shine effects, cursor-tracked gradients, spotlights, and
moving gradient borders.
- [PhiaUi.Components.Animation](PhiaUi.Components.Animation.md): Animation primitives for PhiaUI — 22 components covering infinite loops,
background effects, text effects, entry/scroll animations, interactive hover,
counter animations, decorative borders, CSS loaders, and canvas effects.
- [PhiaUi.Components.AppShell](PhiaUi.Components.AppShell.md): Application shell layout component providing a full-page grid structure.
- [PhiaUi.Components.AppStoreButton](PhiaUi.Components.AppStoreButton.md): Apple App Store and Google Play Store badge buttons.
- [PhiaUi.Components.ArcDiagram](PhiaUi.Components.ArcDiagram.md): Arc diagram — pure SVG, zero JS.
- [PhiaUi.Components.AreaChart](PhiaUi.Components.AreaChart.md): Filled area chart — pure SVG, zero JS.
- [PhiaUi.Components.Article](PhiaUi.Components.Article.md): Semantic article component with structured title, meta, lead, body, and footer.
- [PhiaUi.Components.ArticleCard](PhiaUi.Components.ArticleCard.md): ArticleCard — a blog post / article preview card.
- [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.AutocompleteInput](PhiaUi.Components.AutocompleteInput.md): Text input with HTML5 datalist suggestions.
- [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.AvatarUpload](PhiaUi.Components.AvatarUpload.md): Circular or square profile photo uploader with overlay edit icon.
- [PhiaUi.Components.BackToTop](PhiaUi.Components.BackToTop.md): Floating "back to top" button that appears after scrolling past a threshold.
- [PhiaUi.Components.BackTop](PhiaUi.Components.BackTop.md): BackTop component — a floating "scroll to top" button.
- [PhiaUi.Components.Background](PhiaUi.Components.Background.md): Background pattern and decoration components for PhiaUI.
- [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.BadgeDelta](PhiaUi.Components.BadgeDelta.md): Delta badge — a colored pill showing a metric trend with an icon.
- [PhiaUi.Components.BadgeGroup](PhiaUi.Components.BadgeGroup.md): Badge + text description combo component.
- [PhiaUi.Components.Banner](PhiaUi.Components.Banner.md): Full-width page-level feedback banners inspired by Atlassian Design System Banner,
Bootstrap Alerts, and GitHub's site-wide announcement banners.
- [PhiaUi.Components.BarChart](PhiaUi.Components.BarChart.md): Vertical grouped / stacked / horizontal bar chart — pure SVG, zero JS.
- [PhiaUi.Components.BarList](PhiaUi.Components.BarList.md): Horizontal bar list — ranks items by value with proportional bars.
- [PhiaUi.Components.Bento](PhiaUi.Components.Bento.md): Bento grid components for PhiaUI — 4 components for Apple-style modular
grid layouts with varying cell spans.
- [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.BoxPlot](PhiaUi.Components.BoxPlot.md): Box-and-whisker plot — pure SVG, zero JS.
- [PhiaUi.Components.Breadcrumb](PhiaUi.Components.Breadcrumb.md): Breadcrumb navigation component following the shadcn/ui Breadcrumb anatomy.
- [PhiaUi.Components.BubbleChart](PhiaUi.Components.BubbleChart.md): XY bubble chart with variable-radius circles — pure SVG, zero JS.
- [PhiaUi.Components.BulkActionBar](PhiaUi.Components.BulkActionBar.md): BulkActionBar component for PhiaUI.
- [PhiaUi.Components.BulletChart](PhiaUi.Components.BulletChart.md): Bullet chart — progress toward target with colored range bands — pure SVG, zero JS.
- [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.CandlestickChart](PhiaUi.Components.CandlestickChart.md): Candlestick chart for financial OHLC data — pure SVG, zero JS.
- [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.CategoryBar](PhiaUi.Components.CategoryBar.md): Stacked category bar — normalizes values to 100% and renders colored segments.
- [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.ChipNav](PhiaUi.Components.ChipNav.md): Chip-style filter/tag navigation component.
- [PhiaUi.Components.ChordChart](PhiaUi.Components.ChordChart.md): Chord diagram — pure SVG, zero JS.
- [PhiaUi.Components.CirclePackingChart](PhiaUi.Components.CirclePackingChart.md): Circle packing chart — pure SVG, zero JS.
- [PhiaUi.Components.CircularProgress](PhiaUi.Components.CircularProgress.md): Radial/circular progress indicator rendered as an SVG arc.
- [PhiaUi.Components.ClearableInput](PhiaUi.Components.ClearableInput.md): Text input with an inline × clear button.
- [PhiaUi.Components.CodeSnippet](PhiaUi.Components.CodeSnippet.md): Code display card with filename header, language badge, copy button, and line numbers.
- [PhiaUi.Components.Collab.CollabComment](PhiaUi.Components.Collab.CollabComment.md): Collaboration Comment Suite — 6 components for rendering and interacting
with comments in a collaborative editing context.
- [PhiaUi.Components.Collab.CollabEditor](PhiaUi.Components.Collab.CollabEditor.md): Composite collaborative editor widget.
- [PhiaUi.Components.Collab.CollabHelpers](PhiaUi.Components.Collab.CollabHelpers.md): Shared helper functions for collaboration components.
- [PhiaUi.Components.Collab.CollabNotification](PhiaUi.Components.Collab.CollabNotification.md): Collaborative notification components for real-time multi-user interfaces.
- [PhiaUi.Components.Collab.Composer](PhiaUi.Components.Collab.Composer.md): Composer Suite — 3 components for comment input with @mention support.
- [PhiaUi.Components.Collab.Cursor](PhiaUi.Components.Collab.Cursor.md): Collaborative cursor and selection components for real-time multiplayer UIs.
- [PhiaUi.Components.Collab.MentionHelpers](PhiaUi.Components.Collab.MentionHelpers.md): Helper functions for @mention parsing and rendering.
- [PhiaUi.Components.Collab.Presence](PhiaUi.Components.Collab.Presence.md): Collaborative presence components for real-time multi-user interfaces.
- [PhiaUi.Components.Collab.Thread](PhiaUi.Components.Collab.Thread.md): Thread Suite — 5 components for managing comment threads in collaborative contexts.
- [PhiaUi.Components.Collab.ThreadHelpers](PhiaUi.Components.Collab.ThreadHelpers.md): Helper functions for thread management in collaboration components.
- [PhiaUi.Components.Collab.VersionHelpers](PhiaUi.Components.Collab.VersionHelpers.md): Helper functions for document version history and diffing.
- [PhiaUi.Components.Collab.VersionHistory](PhiaUi.Components.Collab.VersionHistory.md): Version history components for collaborative document editing.
- [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.ColorSwatchCard](PhiaUi.Components.ColorSwatchCard.md): Color swatch card component for displaying a named color with its hex, RGB,
and HSL values, plus an optional one-click copy button.
- [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.CommandPalette](PhiaUi.Components.CommandPalette.md): Command palette (Cmd+K) overlay component.
- [PhiaUi.Components.Comment](PhiaUi.Components.Comment.md): Blog-style comment with avatar, author, date, body, actions, and nested replies.
- [PhiaUi.Components.ComparisonTable](PhiaUi.Components.ComparisonTable.md): Comparison table — feature-by-feature grid for plan/product comparison.
- [PhiaUi.Components.ContextMenu](PhiaUi.Components.ContextMenu.md): Context menu component triggered by right-click (`contextmenu` browser event).
- [PhiaUi.Components.ContextNav](PhiaUi.Components.ContextNav.md): Secondary in-page horizontal navigation strip (sub-navigation).
- [PhiaUi.Components.CopyButton](PhiaUi.Components.CopyButton.md): Copy-to-clipboard button component powered by the `PhiaCopyButton` vanilla JS hook.
- [PhiaUi.Components.CopyInput](PhiaUi.Components.CopyInput.md): Read-only input with an inline copy-to-clipboard button.
- [PhiaUi.Components.CountdownTimer](PhiaUi.Components.CountdownTimer.md): Display-only countdown timer widget rendered in two variants.
- [PhiaUi.Components.CtaCard](PhiaUi.Components.CtaCard.md): Call-to-action card: illustration/icon + headline + description + CTA buttons.
- [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.Data.ArcLinkLabels](PhiaUi.Components.Data.ArcLinkLabels.md): Leader lines from pie/donut slices to external labels — pure SVG, zero JS.
- [PhiaUi.Components.Data.BarTotals](PhiaUi.Components.Data.BarTotals.md): Sum labels rendered above stacked bar groups — pure SVG, zero JS.
- [PhiaUi.Components.Data.ChartActiveShape](PhiaUi.Components.Data.ChartActiveShape.md): Hover-expanding shape component for chart elements.
- [PhiaUi.Components.Data.ChartAnnotation](PhiaUi.Components.Data.ChartAnnotation.md): SVG annotation overlays for charts — reference lines, bands, and point markers.
- [PhiaUi.Components.Data.ChartAxis](PhiaUi.Components.Data.ChartAxis.md): Composable SVG axis components for charts.
- [PhiaUi.Components.Data.ChartCrosshair](PhiaUi.Components.Data.ChartCrosshair.md): Crosshair component for chart hover interaction.
- [PhiaUi.Components.Data.ChartDrilldown](PhiaUi.Components.Data.ChartDrilldown.md): Drilldown component for click-to-explore-data pattern.
- [PhiaUi.Components.Data.ChartErrorBar](PhiaUi.Components.Data.ChartErrorBar.md): Error bar component for chart uncertainty visualization.
- [PhiaUi.Components.Data.ChartGrid](PhiaUi.Components.Data.ChartGrid.md): Composable SVG grid components for charts.
- [PhiaUi.Components.Data.ChartLabel](PhiaUi.Components.Data.ChartLabel.md): Flexible SVG text label component with 13 positioning modes.
- [PhiaUi.Components.Data.ChartLayer](PhiaUi.Components.Data.ChartLayer.md): SVG grouping component with z-index convention for chart layering.
- [PhiaUi.Components.Data.ChartLegend](PhiaUi.Components.Data.ChartLegend.md): Composable chart legend components.
- [PhiaUi.Components.Data.ChartNoData](PhiaUi.Components.Data.ChartNoData.md): Empty state placeholder for charts — displays when no data is available.
- [PhiaUi.Components.Data.ChartSvgDefs](PhiaUi.Components.Data.ChartSvgDefs.md): Reusable SVG `<defs>` building blocks for chart gradients, patterns, and clip paths.
- [PhiaUi.Components.Data.ChartSync](PhiaUi.Components.Data.ChartSync.md): Multi-chart synchronization wrapper.
- [PhiaUi.Components.Data.ChartToolbox](PhiaUi.Components.Data.ChartToolbox.md): Chart utilities toolbar.
- [PhiaUi.Components.Data.ChartTooltip](PhiaUi.Components.Data.ChartTooltip.md): Chart tooltip components — pre-positioned SVG tooltip shell and HTML tooltip composition.
- [PhiaUi.Components.Data.DataZoom](PhiaUi.Components.Data.DataZoom.md): Range slider for chart data zooming.
- [PhiaUi.Components.Data.DeltaBar](PhiaUi.Components.Data.DeltaBar.md): Horizontal bar showing positive/negative delta from a center point.
- [PhiaUi.Components.Data.MarkLine](PhiaUi.Components.Data.MarkLine.md): Statistical reference line component for charts.
- [PhiaUi.Components.Data.MarkPoint](PhiaUi.Components.Data.MarkPoint.md): Data point marker component for charts.
- [PhiaUi.Components.Data.MarkerBar](PhiaUi.Components.Data.MarkerBar.md): Progress bar with a positioned marker indicator.
- [PhiaUi.Components.Data.ResponsiveChart](PhiaUi.Components.Data.ResponsiveChart.md): CSS aspect-ratio wrapper for responsive charts — zero JS.
- [PhiaUi.Components.Data.SparkChart](PhiaUi.Components.Data.SparkChart.md): Minimal inline chart components for sparkline visualizations.
- [PhiaUi.Components.Data.Tracker](PhiaUi.Components.Data.Tracker.md): Status tracker visualization — a row of colored blocks representing status over time.
- [PhiaUi.Components.Data.VisualMap](PhiaUi.Components.Data.VisualMap.md): Color scale legend component for charts.
- [PhiaUi.Components.Data.XyChart](PhiaUi.Components.Data.XyChart.md): Composable XY chart container with auto-scaling.
- [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.DataTable](PhiaUi.Components.DataTable.md): All-in-one declarative table — define columns once, render everything.
- [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.Display.ActivityTimeline](PhiaUi.Components.Display.ActivityTimeline.md): Vertical activity timeline for document edit history.
- [PhiaUi.Components.Display.ConnectionStatus](PhiaUi.Components.Display.ConnectionStatus.md): Connection status indicator for real-time collaboration.
- [PhiaUi.Components.Display.PresenceAvatars](PhiaUi.Components.Display.PresenceAvatars.md): Overlapping avatar stack showing online collaborators (Google Docs-style).
- [PhiaUi.Components.Dock](PhiaUi.Components.Dock.md): macOS-style icon dock navigation component.
- [PhiaUi.Components.DocumentUpload](PhiaUi.Components.DocumentUpload.md): Document-specific upload dropzone with file-type icons.
- [PhiaUi.Components.DonutChart](PhiaUi.Components.DonutChart.md): Donut chart with a center slot — pure SVG, zero JS.
- [PhiaUi.Components.DotNavigation](PhiaUi.Components.DotNavigation.md): Dot-style page indicator navigation component.
- [PhiaUi.Components.DotPlot](PhiaUi.Components.DotPlot.md): Dot plot — pure SVG, zero JS.
- [PhiaUi.Components.DraggableTree](PhiaUi.Components.DraggableTree.md): Draggable tree hierarchy components for PhiaUI.
- [PhiaUi.Components.Drawer](PhiaUi.Components.Drawer.md): Drawer component — a sliding panel that enters from any edge of the screen.
- [PhiaUi.Components.DropZone](PhiaUi.Components.DropZone.md): Drop zone and drag transfer list components for PhiaUI.
- [PhiaUi.Components.DropdownMenu](PhiaUi.Components.DropdownMenu.md): Dropdown menu component with smart positioning, click-outside detection,
and full WAI-ARIA keyboard navigation.
- [PhiaUi.Components.DumbbellChart](PhiaUi.Components.DumbbellChart.md): Dumbbell chart — pure SVG, zero JS.
- [PhiaUi.Components.Editable](PhiaUi.Components.Editable.md): Inline-editable field component — click to edit, Enter to submit, Escape to cancel.
- [PhiaUi.Components.Editor](PhiaUi.Components.Editor.md): Editor Suite — 19 components for building rich text editing experiences.
- [PhiaUi.Components.Editor.Academic](PhiaUi.Components.Editor.Academic.md): Editor Academic Suite — 6 components for academic and scholarly writing tools.
- [PhiaUi.Components.Editor.AdvancedBlocks](PhiaUi.Components.Editor.AdvancedBlocks.md): Editor Advanced Block Components — 5 specialized blocks for power-user
editing workflows: synced (reusable) blocks, multi-column layouts with
drag-resize dividers, executable code sandboxes, A4 page containers,
and page header/footer chrome.
- [PhiaUi.Components.Editor.AiAssistant](PhiaUi.Components.Editor.AiAssistant.md): AI Assistant Suite — 10 components for integrating AI capabilities into the
PhiaUI rich text editor.
- [PhiaUi.Components.Editor.BlockControls](PhiaUi.Components.Editor.BlockControls.md): Editor Block Control Components — 4 components for manipulating, converting,
and reordering content blocks within a rich text editor.
- [PhiaUi.Components.Editor.Blocks](PhiaUi.Components.Editor.Blocks.md): Editor Block Components — 9 structural block primitives for rich text editors.
- [PhiaUi.Components.Editor.ContentBlocks](PhiaUi.Components.Editor.ContentBlocks.md): Editor Content Block Components — 14 rich content blocks for embedding
interactive and media elements inside a rich text editor.
- [PhiaUi.Components.Editor.DocumentShell](PhiaUi.Components.Editor.DocumentShell.md): Document Shell Suite — 6 components for building full-page document editors.
- [PhiaUi.Components.Editor.EditorContent](PhiaUi.Components.Editor.EditorContent.md): Pure Elixir utilities for working with editor JSON content.
- [PhiaUi.Components.Editor.Export](PhiaUi.Components.Editor.Export.md): Export Suite — 6 components for importing, exporting, and printing editor content.
- [PhiaUi.Components.Editor.Extensions](PhiaUi.Components.Editor.Extensions.md): Extensions Suite — 10 components for extending the PhiaUI rich text editor
with plugins, emoji, special characters, and block-level controls.
- [PhiaUi.Components.Editor.Formatting](PhiaUi.Components.Editor.Formatting.md): Editor Formatting Suite — 16 components for text formatting controls.
- [PhiaUi.Components.Editor.FormattingToolbar](PhiaUi.Components.Editor.FormattingToolbar.md): Pre-composed formatting toolbars — 4 components for common toolbar layouts.

- [PhiaUi.Components.Editor.LanguageTools](PhiaUi.Components.Editor.LanguageTools.md): Language Tools Suite — 4 components for grammar checking, spell check control,
and custom dictionary management within the PhiaUI rich text editor.
- [PhiaUi.Components.Editor.MediaBlocks](PhiaUi.Components.Editor.MediaBlocks.md): Editor Media Block Components — 9 rich media blocks for embedding images,
tables, equations, attachments, diagrams, and drawings inside a rich text editor.
- [PhiaUi.Components.Editor.Presets](PhiaUi.Components.Editor.Presets.md): Editor Presets — 10 pre-composed editor configurations for common use cases.
- [PhiaUi.Components.Editor.References](PhiaUi.Components.Editor.References.md): Editor References Suite — 8 components for footnotes, citations, bookmarks,
cross-references, bibliographies, and abbreviations.
- [PhiaUi.Components.Editor.RichEditor](PhiaUi.Components.Editor.RichEditor.md): Rich Editor Suite — 8 components for building rich text editing experiences
with Phoenix LiveView.
- [PhiaUi.Components.Editor.SearchNav](PhiaUi.Components.Editor.SearchNav.md): Editor Search & Navigation Suite — 6 components for document search, outline
navigation, keyboard shortcuts, and minimap visualization.
- [PhiaUi.Components.Editor.TextDirection](PhiaUi.Components.Editor.TextDirection.md): Text Direction Suite — 2 components for bidirectional (BiDi) text support
in the PhiaUI rich text editor.
- [PhiaUi.Components.Editor.TipTap](PhiaUi.Components.Editor.TipTap.md): TipTap Editor Suite — 8 components for building ProseMirror-powered rich text
editing experiences with Phoenix LiveView.
- [PhiaUi.Components.Editor.TipTapHelpers](PhiaUi.Components.Editor.TipTapHelpers.md): Pure Elixir utilities for working with TipTap JSON content.
- [PhiaUi.Components.Editor.TrackChanges](PhiaUi.Components.Editor.TrackChanges.md): Track Changes Suite — 7 components for document revision tracking and collaboration.
- [PhiaUi.Components.Editor.WritingTools](PhiaUi.Components.Editor.WritingTools.md): Editor Writing Tools Suite — 8 components for writing productivity, readability
analysis, focus mode, voice input, text-to-speech, statistics, and grammar checking.
- [PhiaUi.Components.EditorHighlightPicker](PhiaUi.Components.EditorHighlightPicker.md): Editor highlight (realce) color picker with curated academic-friendly colors.
- [PhiaUi.Components.EmptyState](PhiaUi.Components.EmptyState.md): Empty state component for displaying when a list, table, or view has no data.
- [PhiaUi.Components.ErrorDisplay](PhiaUi.Components.ErrorDisplay.md): Structured error display components for showing application errors, API failures,
and standard HTTP error pages.
- [PhiaUi.Components.EventCalendar](PhiaUi.Components.EventCalendar.md): Full-month event calendar with colored event badges per day.
- [PhiaUi.Components.EventCard](PhiaUi.Components.EventCard.md): Card component for displaying an event with a colored date badge, time,
location, attendee avatar stack, and optional actions slot.
- [PhiaUi.Components.ExpandableTable](PhiaUi.Components.ExpandableTable.md): Expandable table rows with collapsible detail panels.
- [PhiaUi.Components.FancyButton](PhiaUi.Components.FancyButton.md): Visually enhanced button variants for hero sections, landing pages, and
attention-grabbing CTAs.
- [PhiaUi.Components.FeatureCard](PhiaUi.Components.FeatureCard.md): Icon + title + description — the standard landing page feature block.
- [PhiaUi.Components.FeedbackWidget](PhiaUi.Components.FeedbackWidget.md): Micro-feedback collection components for gathering quick user feedback
without interrupting the user's workflow.
- [PhiaUi.Components.Field](PhiaUi.Components.Field.md): Standalone field layout primitives for composing form fields without `Phoenix.HTML.FormField`.
- [PhiaUi.Components.FileCard](PhiaUi.Components.FileCard.md): File attachment card with type-based icon and color coding.
- [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.FloatingNav](PhiaUi.Components.FloatingNav.md): Floating pill navigation bar — fixed or sticky pill anchored to the viewport.
- [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.FormLayout](PhiaUi.Components.FormLayout.md): Form layout structure components for grouping, organizing, and collecting
feedback within complex forms.
- [PhiaUi.Components.FormSelects](PhiaUi.Components.FormSelects.md): Selection group components: multi-checkbox groups, card-style radio groups,
cascading selects, and dual-panel transfer lists.
- [PhiaUi.Components.FullscreenDrop](PhiaUi.Components.FullscreenDrop.md): Full-viewport drop overlay that appears when the user drags files over the browser window.
- [PhiaUi.Components.FunnelChart](PhiaUi.Components.FunnelChart.md): Funnel chart — visualizes stage-by-stage drop-off in a conversion pipeline.
- [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.Glass](PhiaUi.Components.Glass.md): Glass and frosted-surface components for PhiaUI — 5 components covering
glassmorphism, acrylic noise textures, Apple Liquid Glass, and neon glow effects.
- [PhiaUi.Components.GlobalMessage](PhiaUi.Components.GlobalMessage.md): Global message component for top-center auto-dismissing feedback messages.
- [PhiaUi.Components.HeatmapCalendar](PhiaUi.Components.HeatmapCalendar.md): Heatmap calendar grid component for PhiaUI.
- [PhiaUi.Components.HeatmapChart](PhiaUi.Components.HeatmapChart.md): Two-dimensional color-coded grid heatmap — pure SVG, zero JS.
- [PhiaUi.Components.HistogramChart](PhiaUi.Components.HistogramChart.md): Frequency distribution histogram — pure SVG, zero JS.
- [PhiaUi.Components.HoverCard](PhiaUi.Components.HoverCard.md): HoverCard component — a rich floating panel revealed on hover with configurable delays.
- [PhiaUi.Components.IcicleChart](PhiaUi.Components.IcicleChart.md): Icicle chart — pure SVG, zero JS.
- [PhiaUi.Components.Icon](PhiaUi.Components.Icon.md): Inline SVG icon component backed by a Lucide icon sprite file.
- [PhiaUi.Components.IconButton](PhiaUi.Components.IconButton.md): Icon-only button with a required accessible label and an optional CSS tooltip.
- [PhiaUi.Components.ImageCard](PhiaUi.Components.ImageCard.md): Hero image (top-cover) + card content below.
- [PhiaUi.Components.ImageComparison](PhiaUi.Components.ImageComparison.md): Image comparison slider — drag to reveal before/after images.
- [PhiaUi.Components.ImageGalleryUpload](PhiaUi.Components.ImageGalleryUpload.md): Multi-image upload with a grid thumbnail gallery.
- [PhiaUi.Components.ImageUpload](PhiaUi.Components.ImageUpload.md): Image upload component for PhiaUI.
- [PhiaUi.Components.InlineEditTable](PhiaUi.Components.InlineEditTable.md): Inline-editable table row components for in-place data editing.
- [PhiaUi.Components.InlineSearch](PhiaUi.Components.InlineSearch.md): Expandable search — collapses to an icon button, expands to a full input.
- [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.InputGroup](PhiaUi.Components.InputGroup.md): Horizontal group of connected inputs sharing a unified border.
- [PhiaUi.Components.InputOtp](PhiaUi.Components.InputOtp.md): One-time password (OTP) input component with individual digit slots.
- [PhiaUi.Components.Item](PhiaUi.Components.Item.md): Versatile list item component with media, title, description, and trailing actions.
- [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.Layout.Box](PhiaUi.Components.Layout.Box.md): Semantic HTML wrapper component with configurable element tag.
- [PhiaUi.Components.Layout.Center](PhiaUi.Components.Layout.Center.md): Centers content both horizontally and vertically.
- [PhiaUi.Components.Layout.Container](PhiaUi.Components.Layout.Container.md): Max-width content constrainer with responsive size presets.
- [PhiaUi.Components.Layout.ContainerQuery](PhiaUi.Components.Layout.ContainerQuery.md): Container query wrapper component.
- [PhiaUi.Components.Layout.Cover](PhiaUi.Components.Layout.Cover.md): Full-bleed image or video background with content overlay.
- [PhiaUi.Components.Layout.DescriptionList](PhiaUi.Components.Layout.DescriptionList.md): Semantic `<dl>/<dt>/<dd>` key-value display component.
- [PhiaUi.Components.Layout.Divider](PhiaUi.Components.Layout.Divider.md): Enhanced separator with optional centered text label.
- [PhiaUi.Components.Layout.FixedBar](PhiaUi.Components.Layout.FixedBar.md): Fixed-positioned bar anchored to the top or bottom of the viewport.
- [PhiaUi.Components.Layout.Flex](PhiaUi.Components.Layout.Flex.md): Full flexbox control component.
- [PhiaUi.Components.Layout.Grid](PhiaUi.Components.Layout.Grid.md): CSS Grid container with column, row, gap and auto-flow control.
- [PhiaUi.Components.Layout.MasonryGrid](PhiaUi.Components.Layout.MasonryGrid.md): CSS `columns` masonry grid — items flow top-to-bottom in columns like a
Pinterest board or photo wall.
- [PhiaUi.Components.Layout.MediaObject](PhiaUi.Components.Layout.MediaObject.md): Classic media-object layout: a fixed media element (image/icon/avatar)
alongside a flexible body content block.
- [PhiaUi.Components.Layout.NavList](PhiaUi.Components.Layout.NavList.md): Vertical navigation list with groups, icons, nested subnav, and active state.
- [PhiaUi.Components.Layout.PageHeader](PhiaUi.Components.Layout.PageHeader.md): Page title bar with breadcrumb, title, description, and actions slots.
- [PhiaUi.Components.Layout.PageLayout](PhiaUi.Components.Layout.PageLayout.md): Full-page layout composition: header / pane (sidebar) / main / footer slots.
- [PhiaUi.Components.Layout.ResponsiveStack](PhiaUi.Components.Layout.ResponsiveStack.md): A responsive flex stack that switches from vertical (column) on mobile to
horizontal (row) at a configurable breakpoint.
- [PhiaUi.Components.Layout.ResponsiveVisibility](PhiaUi.Components.Layout.ResponsiveVisibility.md): Responsive visibility components for declaratively showing or hiding content
at specific breakpoints.
- [PhiaUi.Components.Layout.Section](PhiaUi.Components.Layout.Section.md): Semantic `<section>` wrapper with size-based vertical padding.
- [PhiaUi.Components.Layout.SectionFooter](PhiaUi.Components.Layout.SectionFooter.md): Section-ending divider with action row.
- [PhiaUi.Components.Layout.SectionHeader](PhiaUi.Components.Layout.SectionHeader.md): Section heading with optional description and action area.
- [PhiaUi.Components.Layout.SimpleGrid](PhiaUi.Components.Layout.SimpleGrid.md): Auto-responsive equal-width grid — no manual breakpoints required.
- [PhiaUi.Components.Layout.Spacer](PhiaUi.Components.Layout.Spacer.md): Flex spacer that grows to fill remaining space in a flex container.
- [PhiaUi.Components.Layout.SplitLayout](PhiaUi.Components.Layout.SplitLayout.md): Two-column layout: a fixed-width pane alongside flexible main content.
- [PhiaUi.Components.Layout.Stack](PhiaUi.Components.Layout.Stack.md): Vertical or horizontal flex stack with consistent gap.
- [PhiaUi.Components.Layout.Sticky](PhiaUi.Components.Layout.Sticky.md): Sticky-positioned container that adheres to the top or bottom of the viewport
as the user scrolls.
- [PhiaUi.Components.Layout.Wrap](PhiaUi.Components.Layout.Wrap.md): Flex-wrap container for tags, chips, and button groups.
- [PhiaUi.Components.Leaderboard](PhiaUi.Components.Leaderboard.md): Leaderboard — ranked list with medals, avatars, metrics, and delta badges.
- [PhiaUi.Components.Lightbox](PhiaUi.Components.Lightbox.md): Modal image/video gallery with keyboard navigation and touch swipe.
- [PhiaUi.Components.LineChart](PhiaUi.Components.LineChart.md): Single / multi-series line chart — pure SVG, zero JS.
- [PhiaUi.Components.LinkGroup](PhiaUi.Components.LinkGroup.md): Organized footer / help-column navigation links.
- [PhiaUi.Components.LinkPreviewCard](PhiaUi.Components.LinkPreviewCard.md): Card component for displaying an Open Graph-style link preview with a
title, description, image, favicon, site name, and extracted domain.
- [PhiaUi.Components.LoadingOverlay](PhiaUi.Components.LoadingOverlay.md): Loading state components for blocking operations, animated loaders, and
top-of-page progress indicators.
- [PhiaUi.Components.LollipopChart](PhiaUi.Components.LollipopChart.md): Lollipop chart — pure SVG, zero JS.
- [PhiaUi.Components.Marker](PhiaUi.Components.Marker.md): Point-of-interest indicator positioned absolutely on images or maps.
- [PhiaUi.Components.Marketing](PhiaUi.Components.Marketing.md): Marketing page section components.
- [PhiaUi.Components.Marketing.FeatureSection](PhiaUi.Components.Marketing.FeatureSection.md): Grid section for displaying feature cards with heading and description.
- [PhiaUi.Components.Marketing.HeroSection](PhiaUi.Components.Marketing.HeroSection.md): Structured hero section with heading, subheading, CTA buttons, and optional media.
- [PhiaUi.Components.MegaMenu](PhiaUi.Components.MegaMenu.md): Full-width mega menu navigation component.
- [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.MeterGroup](PhiaUi.Components.MeterGroup.md): Meter group — a labeled collection of progress meters.
- [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.MultiDrag](PhiaUi.Components.MultiDrag.md): Multi-select drag-and-drop list component for PhiaUI.
- [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.NativeSelect](PhiaUi.Components.NativeSelect.md): Styled native `<select>` wrapper without `Phoenix.HTML.FormField` dependency.
- [PhiaUi.Components.NavLink](PhiaUi.Components.NavLink.md): Versatile navigation link component (Mantine-style).
- [PhiaUi.Components.NavRail](PhiaUi.Components.NavRail.md): Material Design 3-style icon-strip sidebar navigation rail.
- [PhiaUi.Components.NavigationMenu](PhiaUi.Components.NavigationMenu.md): Horizontal navigation menu with optional dropdown panels.
- [PhiaUi.Components.Notification](PhiaUi.Components.Notification.md): Rich in-app notification components inspired by Ant Design Notification, Mantine Notifications,
and Atlassian Flag system.
- [PhiaUi.Components.NotificationCard](PhiaUi.Components.NotificationCard.md): Notification/alert card with type-based color coding and dismiss support.
- [PhiaUi.Components.NpsWidget](PhiaUi.Components.NpsWidget.md): Net Promoter Score widget — SVG half-circle arc gauge + breakdown bars.
- [PhiaUi.Components.NumberInput](PhiaUi.Components.NumberInput.md): Numeric stepper input component with optional prefix/suffix and form integration.
- [PhiaUi.Components.OverlaySurface](PhiaUi.Components.OverlaySurface.md): Overlay surface components for PhiaUI — 6 components for scrims, image overlays,
gradient overlays, spotlights, and bottom sheets.
- [PhiaUi.Components.PageProgress](PhiaUi.Components.PageProgress.md): Reading progress bar fixed at the top or bottom of the page.
- [PhiaUi.Components.Pagination](PhiaUi.Components.Pagination.md): Pagination navigation component for paginating large data sets.
- [PhiaUi.Components.ParetoChart](PhiaUi.Components.ParetoChart.md): Pareto chart — pure SVG, zero JS.
- [PhiaUi.Components.ParliamentChart](PhiaUi.Components.ParliamentChart.md): Parliament chart — pure SVG, zero JS.
- [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.PhoneInput](PhiaUi.Components.PhoneInput.md): Phone number input with a country dial-code prefix selector.
- [PhiaUi.Components.PictogramChart](PhiaUi.Components.PictogramChart.md): Pictogram chart — pure SVG, zero JS.
- [PhiaUi.Components.PieChart](PhiaUi.Components.PieChart.md): Pie chart with arc-path slices — pure SVG, zero JS.
- [PhiaUi.Components.PivotTable](PhiaUi.Components.PivotTable.md): Cross-tabulation (pivot) table — rows × columns matrix display.
- [PhiaUi.Components.PolarAreaChart](PhiaUi.Components.PolarAreaChart.md): Polar area chart — pure SVG, zero JS.
- [PhiaUi.Components.Popconfirm](PhiaUi.Components.Popconfirm.md): Popconfirm — inline confirmation popup attached to a trigger element.
- [PhiaUi.Components.Popover](PhiaUi.Components.Popover.md): Popover component powered by the `PhiaPopover` vanilla JavaScript hook.
- [PhiaUi.Components.PricingCard](PhiaUi.Components.PricingCard.md): Pricing plan card for displaying subscription tiers.
- [PhiaUi.Components.ProductCard](PhiaUi.Components.ProductCard.md): E-commerce product card with image, rating, pricing, and add-to-cart action.
- [PhiaUi.Components.ProfileCard](PhiaUi.Components.ProfileCard.md): ProfileCard — a user profile display card with avatar, name, role, online status, and composable slots.
- [PhiaUi.Components.Progress](PhiaUi.Components.Progress.md): Linear progress bar for displaying completion of a task or process.
- [PhiaUi.Components.ProgressCard](PhiaUi.Components.ProgressCard.md): Card component that displays a titled progress bar with optional description,
value label, variant coloring, size, icon slot, and footer slot.
- [PhiaUi.Components.ProgressEnhanced](PhiaUi.Components.ProgressEnhanced.md): Enhanced progress components extending the basic `Progress` component with
labeled, multi-segment, quota, and step-based variants.
- [PhiaUi.Components.QrCode](PhiaUi.Components.QrCode.md): QrCode component — server-side SVG QR code generation.
- [PhiaUi.Components.RadarChart](PhiaUi.Components.RadarChart.md): Spider / radar chart — pure SVG, zero JS.
- [PhiaUi.Components.RadialBarChart](PhiaUi.Components.RadialBarChart.md): Radial bar chart with concentric arc rings — pure SVG, zero JS.
- [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.ResponsiveTable](PhiaUi.Components.ResponsiveTable.md): Horizontally scrollable table with responsive `data-label` field metadata.
- [PhiaUi.Components.ResultState](PhiaUi.Components.ResultState.md): Result state — centered page-level feedback with icon, title, description, and actions.
- [PhiaUi.Components.RichTextEditor](PhiaUi.Components.RichTextEditor.md): Rich text editor component for PhiaUI.
- [PhiaUi.Components.RidgelineChart](PhiaUi.Components.RidgelineChart.md): Ridgeline chart (joy plot) — pure SVG, zero JS.
- [PhiaUi.Components.SankeyChart](PhiaUi.Components.SankeyChart.md): Sankey flow diagram — pure SVG, zero JS.
- [PhiaUi.Components.ScatterChart](PhiaUi.Components.ScatterChart.md): XY scatter chart — pure SVG, zero JS.
- [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.SearchInput](PhiaUi.Components.SearchInput.md): Search input component with icon, optional clear button, and shortcut badge.
- [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.SlopeChart](PhiaUi.Components.SlopeChart.md): Slope chart — before/after comparison with diagonal lines — pure SVG, zero JS.
- [PhiaUi.Components.SmartInputs](PhiaUi.Components.SmartInputs.md): Smart and interactive input components for PhiaUI.
- [PhiaUi.Components.Snackbar](PhiaUi.Components.Snackbar.md): Floating bottom action bar for bulk-selection feedback.
- [PhiaUi.Components.SocialButton](PhiaUi.Components.SocialButton.md): Platform-branded OAuth / social sign-in buttons.
- [PhiaUi.Components.Sonner](PhiaUi.Components.Sonner.md): Sonner-style toast notification component powered by the `PhiaSonner` vanilla
JavaScript hook.
- [PhiaUi.Components.Sortable](PhiaUi.Components.Sortable.md): Sortable drag-and-drop list components for PhiaUI.
- [PhiaUi.Components.SortableGrid](PhiaUi.Components.SortableGrid.md): Sortable grid drag-and-drop components for PhiaUI.
- [PhiaUi.Components.SparklineCard](PhiaUi.Components.SparklineCard.md): Compact metric card with an inline SVG sparkline.
- [PhiaUi.Components.SpecialEntry](PhiaUi.Components.SpecialEntry.md): Special entry input components for PhiaUI.
- [PhiaUi.Components.SpecialInputs](PhiaUi.Components.SpecialInputs.md): Specialized form input components: currency, masked input, two-thumb range slider,
signature pad, floating labels, swatch picker, form stepper, and country selector.
- [PhiaUi.Components.SpeedDial](PhiaUi.Components.SpeedDial.md): Floating Action Button (FAB) speed dial component.
- [PhiaUi.Components.Spinner](PhiaUi.Components.Spinner.md): Animated loading spinner component.
- [PhiaUi.Components.SplitButton](PhiaUi.Components.SplitButton.md): Split button: primary action (left) + dropdown caret (right).
- [PhiaUi.Components.StatCard](PhiaUi.Components.StatCard.md): Dashboard KPI widget built on top of the `Card` and `Badge` primitives.
- [PhiaUi.Components.StatusIndicator](PhiaUi.Components.StatusIndicator.md): Status indicator components for displaying live system status, user presence,
connection state, and service health.
- [PhiaUi.Components.StepTracker](PhiaUi.Components.StepTracker.md): Multi-step progress indicator (stepper / wizard) component.
- [PhiaUi.Components.StepperNav](PhiaUi.Components.StepperNav.md): Visual step progress indicator for onboarding, checkout, and wizard flows.
- [PhiaUi.Components.StreakCalendar](PhiaUi.Components.StreakCalendar.md): Duolingo/Fitbit-style habit streak calendar.
- [PhiaUi.Components.StreamChart](PhiaUi.Components.StreamChart.md): Stream graph (ThemeRiver) — pure SVG, zero JS.
- [PhiaUi.Components.SunburstChart](PhiaUi.Components.SunburstChart.md): Sunburst chart for hierarchical data — pure SVG, zero JS.
- [PhiaUi.Components.Surface](PhiaUi.Components.Surface.md): Surface primitives for PhiaUI — 5 components covering elevation, tonality,
inset depth, scrollable containers, and tonal color layers.
- [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.TableGroup](PhiaUi.Components.TableGroup.md): Grouped table body with a sticky-ish group header row.
- [PhiaUi.Components.TableState](PhiaUi.Components.TableState.md): Loading skeleton, empty state, and error state for table components.
- [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.Tag](PhiaUi.Components.Tag.md): Removable tag component with dot indicator and close button.
- [PhiaUi.Components.TagsInput](PhiaUi.Components.TagsInput.md): Tags input component for PhiaUI.
- [PhiaUi.Components.TeamCard](PhiaUi.Components.TeamCard.md): TeamCard — displays a team member with avatar, name, role, department, email,
and optional badge/action slots.
- [PhiaUi.Components.TestimonialCard](PhiaUi.Components.TestimonialCard.md): TestimonialCard — a customer quote card with author info, optional star rating,
and three layout variants.
- [PhiaUi.Components.Textarea](PhiaUi.Components.Textarea.md): Multi-line textarea form component for Phoenix LiveView.
- [PhiaUi.Components.TextareaCounter](PhiaUi.Components.TextareaCounter.md): Textarea with a character counter and optional max-length enforcement.
- [PhiaUi.Components.TextareaEnhanced](PhiaUi.Components.TextareaEnhanced.md): Enhanced textarea components for PhiaUI.
- [PhiaUi.Components.ThemeProvider](PhiaUi.Components.ThemeProvider.md): Scoped CSS theme provider using a CSS-first, data-attribute approach.
- [PhiaUi.Components.Thumbnav](PhiaUi.Components.Thumbnav.md): Thumbnail navigation strip for image galleries and slideshows.
- [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.TimelineChart](PhiaUi.Components.TimelineChart.md): Horizontal event timeline — pure SVG, zero JS.
- [PhiaUi.Components.TimelineTable](PhiaUi.Components.TimelineTable.md): Timeline / activity log display component.
- [PhiaUi.Components.Toast](PhiaUi.Components.Toast.md): Toast notification component powered by the `PhiaToast` vanilla JavaScript hook.
- [PhiaUi.Components.Toc](PhiaUi.Components.Toc.md): Sticky table of contents with scroll-spy via IntersectionObserver.
- [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.TreeEnhanced](PhiaUi.Components.TreeEnhanced.md): Enhanced tree view components for PhiaUI.
- [PhiaUi.Components.TreemapChart](PhiaUi.Components.TreemapChart.md): Hierarchical treemap with squarified tile layout — pure SVG, zero JS.
- [PhiaUi.Components.Typography](PhiaUi.Components.Typography.md): Typography primitives for PhiaUI — 18 components covering headings, text,
code, lists, and prose containers.
- [PhiaUi.Components.Typography.Leader](PhiaUi.Components.Typography.Leader.md): Dot/dash leader fill between two inline elements.
- [PhiaUi.Components.UnitInput](PhiaUi.Components.UnitInput.md): Number input with a semantic unit prefix or suffix.
- [PhiaUi.Components.UploadButton](PhiaUi.Components.UploadButton.md): Button-style file picker — triggers the file dialog without a drop zone.
- [PhiaUi.Components.UploadCard](PhiaUi.Components.UploadCard.md): Card for displaying a completed file upload.
- [PhiaUi.Components.UploadProgress](PhiaUi.Components.UploadProgress.md): Standalone upload progress component with status states.
- [PhiaUi.Components.UploadQueue](PhiaUi.Components.UploadQueue.md): Ordered upload queue showing per-file progress for multiple entries.
- [PhiaUi.Components.UptimeBar](PhiaUi.Components.UptimeBar.md): Uptime status bar — a row of colored segments indicating service health over time.
- [PhiaUi.Components.UrlInput](PhiaUi.Components.UrlInput.md): URL input with a lockable protocol prefix selector.
- [PhiaUi.Components.Utilities](PhiaUi.Components.Utilities.md): General-purpose utility display components for PhiaUI.
- [PhiaUi.Components.VerticalNav](PhiaUi.Components.VerticalNav.md): Vertical navigation component for sidebars and side panels.
- [PhiaUi.Components.VideoPlayer](PhiaUi.Components.VideoPlayer.md): HTML5 video player with custom controls and aspect ratio support.
- [PhiaUi.Components.ViolinPlot](PhiaUi.Components.ViolinPlot.md): Violin plot showing kernel density estimation distributions — pure SVG, zero JS.
- [PhiaUi.Components.WaffleChart](PhiaUi.Components.WaffleChart.md): Waffle chart — pure SVG, zero JS.
- [PhiaUi.Components.WaterfallChart](PhiaUi.Components.WaterfallChart.md): Waterfall chart — cumulative positive/negative bars — pure SVG, zero JS.
- [PhiaUi.Components.Watermark](PhiaUi.Components.Watermark.md): Watermark — repeating text overlay using an inline SVG `<pattern>`.
- [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.WordCloudChart](PhiaUi.Components.WordCloudChart.md): Word cloud chart — pure SVG, zero JS.
- [PhiaUi.Components.YearPicker](PhiaUi.Components.YearPicker.md): Year selection input — styled `<input type="number">` scoped to year ranges.
- [PhiaUi.Editor.AiBridge](PhiaUi.Editor.AiBridge.md): Behaviour for AI-powered editor operations.
- [PhiaUi.Editor.AiBridge.Noop](PhiaUi.Editor.AiBridge.Noop.md): Default no-op AI bridge implementation.
- [PhiaUi.Editor.CitationHelpers](PhiaUi.Editor.CitationHelpers.md): Pure Elixir utilities for formatting citations and parsing BibTeX.
- [PhiaUi.Editor.CollabChannel](PhiaUi.Editor.CollabChannel.md): Phoenix Channel for Yjs collaborative editing via TipTap.
- [PhiaUi.Editor.CollabServer](PhiaUi.Editor.CollabServer.md): GenServer managing a single collaborative document via Operational Transform.
- [PhiaUi.Editor.ExportHelpers](PhiaUi.Editor.ExportHelpers.md): Pure Elixir helpers for converting editor JSON documents to and from various
text formats.
- [PhiaUi.Editor.OtEngine](PhiaUi.Editor.OtEngine.md): Pure Elixir Operational Transform (OT) engine for collaborative text editing.
- [PhiaUi.ResponsiveHelpers](PhiaUi.ResponsiveHelpers.md): Shared helpers for converting per-breakpoint responsive maps into Tailwind
CSS class strings.
- [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.
- [PhiaUiDesign.Canvas.History](PhiaUiDesign.Canvas.History.md): Command-pattern undo/redo stack for scene operations.

- [PhiaUiDesign.Canvas.Layout](PhiaUiDesign.Canvas.Layout.md): Converts node layout properties to Tailwind CSS v4 classes.
- [PhiaUiDesign.Canvas.Node](PhiaUiDesign.Canvas.Node.md): Represents a single node in the design canvas scene graph.
- [PhiaUiDesign.Canvas.Persistence](PhiaUiDesign.Canvas.Persistence.md): Save and load design scenes to/from `.phia.json` files.
- [PhiaUiDesign.Canvas.Scene](PhiaUiDesign.Canvas.Scene.md): ETS-backed scene graph for the design canvas.
- [PhiaUiDesign.Canvas.Selection](PhiaUiDesign.Canvas.Selection.md): Manages selection state for the design canvas.

- [PhiaUiDesign.Canvas.Variables](PhiaUiDesign.Canvas.Variables.md): Variable/token system for the PhiaUI Design canvas.
- [PhiaUiDesign.Catalog.CatalogServer](PhiaUiDesign.Catalog.CatalogServer.md): GenServer that caches introspected component data in ETS for fast access.
Refreshes on demand.

- [PhiaUiDesign.Catalog.FamilyResolver](PhiaUiDesign.Catalog.FamilyResolver.md): Detects composable component families by analyzing which components share
the same module and have naming prefix patterns.
- [PhiaUiDesign.Catalog.Introspector](PhiaUiDesign.Catalog.Introspector.md): Introspects Phoenix component modules to extract attrs, slots, and metadata.
- [PhiaUiDesign.Codegen.AttrFormatter](PhiaUiDesign.Codegen.AttrFormatter.md): Formats Elixir values for HEEx template attributes.
- [PhiaUiDesign.Codegen.HeexEmitter](PhiaUiDesign.Codegen.HeexEmitter.md): Converts a scene graph into a valid HEEx template string.
- [PhiaUiDesign.Codegen.LiveviewEmitter](PhiaUiDesign.Codegen.LiveviewEmitter.md): Generates a complete Phoenix LiveView module source string from a scene graph.
- [PhiaUiDesign.Mcp.BatchDesign](PhiaUiDesign.Mcp.BatchDesign.md): Execute multiple design operations atomically with bindings and rollback.
- [PhiaUiDesign.Mcp.BatchGet](PhiaUiDesign.Mcp.BatchGet.md): Pattern-based search and batch retrieval of nodes from the scene graph.
- [PhiaUiDesign.Mcp.Server](PhiaUiDesign.Mcp.Server.md): MCP (Model Context Protocol) server for Claude Code integration.
- [PhiaUiDesign.Mcp.SnapshotLayout](PhiaUiDesign.Mcp.SnapshotLayout.md): Computes approximate bounding boxes from layout properties.
- [PhiaUiDesign.Mcp.ToolRegistry](PhiaUiDesign.Mcp.ToolRegistry.md): Defines all MCP tool specifications with JSON Schema input definitions.
- [PhiaUiDesign.Mcp.Tools](PhiaUiDesign.Mcp.Tools.md): Implements all 15 MCP tool handlers for the PhiaUI Design server.
- [PhiaUiDesign.Templates.PageTemplates](PhiaUiDesign.Templates.PageTemplates.md): Pre-built page scaffolds for the PhiaUI Design editor.
- [PhiaUiDesign.Templates.SemanticDefaults](PhiaUiDesign.Templates.SemanticDefaults.md): Role-based defaults for components used in page templates.
- [PhiaUiDesign.Web.ComponentRenderer](PhiaUiDesign.Web.ComponentRenderer.md): Renders real PhiaUI components dynamically for the design canvas.
- [PhiaUiDesign.Web.EditorLive](PhiaUiDesign.Web.EditorLive.md): Main LiveView for the PhiaUI Design visual editor.
- [PhiaUiDesign.Web.Endpoint](PhiaUiDesign.Web.Endpoint.md): Phoenix Endpoint for the PhiaUI Design tool.
- [PhiaUiDesign.Web.Layouts](PhiaUiDesign.Web.Layouts.md): Inline layout module for the PhiaUI Design tool.
- [PhiaUiDesign.Web.Router](PhiaUiDesign.Web.Router.md): Router for the PhiaUI Design tool.

## 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.design](Mix.Tasks.Phia.Design.md): Starts the PhiaUI Design tool — a visual component editor.
- [mix phia.design.analyze](Mix.Tasks.Phia.Design.Analyze.md): Analyze a saved PhiaUI design file.
- [mix phia.design.export](Mix.Tasks.Phia.Design.Export.md): Export a saved PhiaUI design to HEEx or LiveView source files.
- [mix phia.design.mcp](Mix.Tasks.Phia.Design.Mcp.md): Starts the PhiaUI Design MCP server for Claude Code integration.
- [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.