Overview
Fluxon UI is a component library for Phoenix LiveView that provides a collection of UI components designed specifically for building modern, responsive web applications. The library emphasizes four core principles:
- ♿ Accessible: Components are built with accessibility at their core, featuring full keyboard navigation, focus management, and WAI-ARIA compliance.
- 🎨 Customizable: While providing polished designs out of the box, components can be easily styled to match your project's needs.
- ✨ Consistent: All components share a cohesive design language for a professional and unified interface.
- 🚀 Lightweight: Built with minimal JavaScript overhead, optimized for Phoenix LiveView applications.
Components
Fluxon UI provides a comprehensive set of components organized into three main categories:
🧱 Base Components
| Component | Description |
|---|---|
Accordion | Vertically stacked interactive headings that reveal or hide associated content |
Alert | Display important messages and feedback to users |
Badge | Small status descriptors for UI elements |
Button | Interactive button elements with various styles and states |
Loading | Loading indicators and spinners |
Navlist | Vertical navigation component |
Separator | Visual divider between content |
Table | Data table with sorting and filtering capabilities |
Tabs | Tabbed interface for organizing content |
🔲 Overlay Components
| Component | Description |
|---|---|
Dropdown | Floating menu triggered by a button |
Modal | Dialog windows for important content and actions |
Popover | Floating content panels triggered by user interaction |
Sheet | Slide-out panel from any edge of the screen |
Tooltip | Short informative message that appears on hover |
📝 Form Components
| Component | Description |
|---|---|
Checkbox | Binary selection input |
DatePicker | Date selection with calendar interface |
Form | Form wrapper with validation and submission handling |
Input | Text input field with various types |
Radio | Single selection from multiple options |
Select | Dropdown selection input |
Switch | Toggle switch for binary options |
Textarea | Multi-line text input |
Installation
See the Installation guide for details on how to add and configure Fluxon to your application.