Default Tailwind CSS UI adapter.
Provides plain Tailwind-styled components for tables and forms. This is the default adapter used when no other is specified.
Summary
Functions
Render a static alert/notice.
Render archive status toggle.
Render bulk actions bar container.
Render individual bulk action button.
Render array/list container.
Render code/monospace cell value (for UUID, etc.).
Render date cell value.
Render datetime cell value.
Render empty cell value (nil/missing data).
Render number cell value.
Render text cell value.
Render a date range container with two date inputs and separator.
Render filter reset/clear button.
Render the form footer (content below the submit row).
Render the form header (title + description).
Single-select dropdown with paginated load-more (no search input).
Render a loading state.
Render loading state.
Multi-select dropdown with search support for relation filters.
Render pagination container with page info.
Render pagination nav button (prev/next/first/last).
Render pagination page number button.
Single-select dropdown with search support for relation filters.
Render template switcher container with buttons.
Render template switcher button.
Functions
Render a static alert/notice.
Assigns
:type-:info|:warning|:error|:success|:neutral:title- optional headline string:content- body string or pre-rendered inner block:icon- optional heroicon name:dismissible- boolean:dismiss_event- phx-click event name for the dismiss button:dismiss_value- phx-value-name payload for dismiss:phx_target- LiveComponent target:class- extra wrapper classes:inner_block- optional slot for HEEx content (overrides:content)
Render archive status toggle.
Assigns
:archive_status- Current status (:active or :archived):myself- LiveComponent target:active_label- Label for active option:archived_label- Label for archived option:status_label- Label prefix
Render bulk actions bar container.
Assigns
:select_all- Whether all are selected:selected_count- Number of selected items:excluded_count- Number of excluded items:inner_block- Slot for action buttons
Render individual bulk action button.
Assigns
:action- The action map:myself- LiveComponent target
Attributes
label(:string) - Defaults tonil.class(:string) - Defaults tonil.type(:string) - Defaults to"button".icon(:string) - Defaults tonil.variant(:atom) - Defaults to:default.- Global attributes are accepted. Supports all globals plus:
["phx-click", "phx-target", "phx-value-id", "phx-value-event", "phx-value-values", "data-confirm", "disabled"].
Render array/list container.
Assigns
:class- Container CSS class (default: "flex flex-wrap gap-1"):badges- List of pre-rendered badge elements (for badge mode):remaining- Pre-rendered remaining count element:inner_block- Slot for array items (alternative to badges)
Render code/monospace cell value (for UUID, etc.).
Assigns
:value- The value to display:title- Optional tooltip (for truncated values):class- CSS class (default: "text-xs font-mono")
Render date cell value.
Assigns
:formatted- The formatted date string:class- CSS class
Render datetime cell value.
Assigns
:formatted- The formatted datetime string:iso- ISO 8601 string for datetime attribute:variant- :default or :relative:class- CSS class
Render empty cell value (nil/missing data).
Assigns
:text- Text to show (default: "-"):class- CSS class (default: "text-gray-400")
Render number cell value.
Assigns
:value- The formatted number string:prefix- Prefix (e.g., "$"):suffix- Suffix (e.g., "%"):class- CSS class (default: "tabular-nums")
Render text cell value.
Assigns
:text- The text to display:title- Optional tooltip (for truncated text):class- CSS class:suffix- Optional suffix text (with different styling):suffix_class- CSS class for suffix (default: "text-gray-500")
Render a date range container with two date inputs and separator.
Assigns
:class- Container CSS class (default: "flex items-center gap-2"):separator_class- Separator text CSS class (default: "text-gray-500"):from_input- Pre-rendered from date input:to_input- Pre-rendered to date input
Render filter reset/clear button.
Assigns
:label- Button label text:class- CSS class
Render the form header (title + description).
Assigns
:title- heading text:description- subtitle text:icon- optional heroicon name:class- extra wrapper classes
Attributes
variant(:atom) - Defaults to:default.
Single-select dropdown with paginated load-more (no search input).
Shows a clickable trigger that opens a dropdown with options and a "Load more" button for pagination.
Render a loading state.
This is an optional function that templates can use for customizable loading UI.
Supports :spinner (default), :skeleton, and :dots types.
Assigns
:type- Loading type::initial,:reset,:more(default::initial):style- Loading style::spinner,:skeleton,:dots(default::spinner):text- Optional loading text:class- Additional CSS classes
Examples
<.loading type={:initial} />
<.loading type={:reset} style={:skeleton} />Render loading state.
Assigns
:type- Loading type (:initial, :reset, :more):text- Loading text:style- Style (:spinner, :skeleton, :dots)
Multi-select dropdown with search support for relation filters.
Shows a searchable dropdown where users can select multiple items. Selected items appear with checkmarks in the dropdown.
Render pagination container with page info.
Assigns
:page- Current page:total_pages- Total pages:total_count- Total record count:show_total- Whether to show total info:page_info_format- Format string for page info:inner_block- Slot for pagination buttons
Render pagination page number button.
Assigns
:page_num- Page number to display:current_page- Currently active page:disabled- Whether button is disabled:myself- LiveComponent target
Single-select dropdown with search support for relation filters.
EXACT COPY of multi_select adapted for single selection.
Render template switcher container with buttons.
Assigns
:switchable_templates- List of template modules:current_template- Currently active template module:myself- LiveComponent target
Render template switcher button.
Assigns
:template- Template module:current_template- Currently active template module:myself- LiveComponent target