View Source SaladUI (SaladUI v1.0.0-beta.1)
SaladUI - A comprehensive UI component library for Phoenix LiveView applications.
SaladUI provides a collection of accessible, customizable UI components that combine server-side rendering with client-side interactivity. Built specifically for Phoenix LiveView, it offers seamless integration between Elixir and JavaScript.
Features
- 40+ UI Components - Buttons, forms, overlays, navigation, and data display
- Accessibility First - ARIA compliant with keyboard navigation and screen reader support
- LiveView Integration - Two-way communication between server and client
- Customizable - Tailwind CSS based with variant support
- Type Safe - Full attribute validation and documentation
Quick Start
Add SaladUI to your Phoenix application:
# In your core components module
use SaladUI
# In templates
<.button variant="primary" phx-click="save">
Save Changes
</.button>
Component Categories
Layout & Structure
card/1
- Content containers with headers and footersseparator/1
- Visual dividers between content sectionsscroll_area/1
- Custom scrollable containers
Forms & Input
button/1
- Interactive buttons with multiple variantsinput/1
- Text inputs with validation supporttextarea/1
- Multi-line text input areascheckbox/1
- Binary choice inputsradio_group/1
- Single choice from multiple optionsselect/1
- Dropdown selection menusslider/1
- Range value selectionswitch/1
- Toggle controlsform/1
,form_item/1
,form_label/1
- Form structure and validation
Navigation
tabs/1
- Tabbed content navigationbreadcrumb/1
- Hierarchical navigation pathspagination/1
- Page navigation controlssidebar/1
- Application navigation sidebars
Overlays & Dialogs
dialog/1
- Modal dialogs and confirmationsalert_dialog/1
- Alert and confirmation dialogssheet/1
- Slide-out panelspopover/1
- Contextual popup contenttooltip/1
- Hover information displayshover_card/1
- Rich hover contentdropdown_menu/1
- Contextual action menus
Feedback & Status
alert/1
- Status messages and notificationsbadge/1
- Labels and status indicatorsprogress/1
- Progress bars and loading statesskeleton/1
- Loading placeholder content
Data Display
table/1
- Data tables with sorting and selectionchart/1
- Data visualization chartsavatar/1
- User profile imagesaccordion/1
- Collapsible content sections
Utility
toggle/1
,toggle_group/1
- Toggle controls and groupscollapsible/1
- Expandable content areascommand/1
- Command palette interfaces
Architecture
SaladUI uses a hybrid architecture combining:
- Phoenix Function Components - Server-side rendering with HEEx templates
- JavaScript State Machines - Client-side behavior and interactivity
- LiveView Hooks - Seamless server-client communication
- Automatic ARIA - Accessibility attributes managed by the framework
Usage Patterns
Basic Component Usage
<.button variant="outline" size="lg">
Large Outline Button
</.button>
Form Integration
<.form for={@form} phx-change="validate" phx-submit="save">
<.form_item>
<.form_label>Email</.form_label>
<.form_control>
<.input field={@form[:email]} type="email" />
</.form_control>
<.form_message field={@form[:email]} />
</.form_item>
</.form>
Interactive Components with Events
<.dialog id="user-dialog" on-open={JS.push("dialog_opened")}>
<.dialog_trigger>
<.button>Edit Profile</.button>
</.dialog_trigger>
<.dialog_content>
<!-- Dialog content -->
</.dialog_content>
</.dialog>
Server-Client Communication
# Send commands to components from LiveView
def handle_event("open_dialog", _params, socket) do
socket = SaladUI.LiveView.send_command(socket, "user-dialog", "open")
{:noreply, socket}
end
Customization
Components support extensive customization through:
- Variants - Pre-defined style variations (e.g.,
variant="destructive"
) - Classes - Custom CSS classes via the
class
attribute - Slots - Flexible content areas within components
- Attributes - Comprehensive configuration options
Accessibility
All components include:
- Proper ARIA attributes and roles
- Keyboard navigation support
- Focus management for overlays
- Screen reader announcements
- High contrast support
Development
When extending SaladUI:
- Follow naming conventions - Use
kebab-case
for data attributes - Implement state machines - Define clear states and transitions
- Handle accessibility - Include ARIA configuration
- Test thoroughly - Verify keyboard and screen reader usage
- Document examples - Provide clear usage examples
Summary
Functions
When used, dispatch to the appropriate macro.