Renders a UIkit alert.

Alerts display feedback messages. They can be dismissed with a close button and support style variants for different message types.

Examples

<.uk_alert>Default alert message.</.uk_alert>
<.uk_alert variant="success" closable>Operation completed.</.uk_alert>
<.uk_alert variant="danger" closable>
  <h3>Error</h3>
  <p>Something went wrong.</p>
</.uk_alert>

Attributes

• variant (:string) - the style variant of the alert. Defaults to nil. Must be one of nil, "primary", "success", "warning", or "danger".
• closable (:boolean) - whether to show a close button. Defaults to false.
• animation (:boolean) - whether to animate on close (default: true). Defaults to nil.
• duration (:integer) - close animation duration in ms (default: 150). Defaults to nil.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the alert container.

Slots

• inner_block (required) - the alert content.

Renders a UIkit badge.

Badges are used to highlight information, such as counts or labels.

Examples

<.uk_badge>1</.uk_badge>
<.uk_badge class="uk-label-success">100</.uk_badge>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the badge container.

Slots

• inner_block (required) - the content of the badge.

Renders a UIkit button.

Supports standard button styles and can function as a link if href, navigate, or patch attributes are provided.

Examples

<.uk_button>Default</.uk_button>
<.uk_button variant="primary">Primary</.uk_button>
<.uk_button variant="danger" size="small">Small Danger</.uk_button>
<.uk_button href="/home">Link Button</.uk_button>

Attributes

• variant (:string) - the visual style of the button. Defaults to "default". Must be one of "default", "primary", "secondary", "danger", "text", or "link".
• size (:string) - the size of the button. Defaults to nil. Must be one of nil, "small", or "large".
• type (:string) - the HTML type of the button (submit, reset, button). Defaults to "button".
• uk_toggle (:string) - the target modal or toggleable element. Defaults to nil.
• disabled (:boolean) - whether the button is disabled. Defaults to false.
• class (:any) - additional CSS classes.
• Global attributes are accepted. the arbitrary HTML attributes to add to the button container. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "uk-icon", "uk-toggle"].

Slots

• inner_block (required) - the content of the button.

Renders a table caption (<caption>).

Example

<.uk_caption>Monthly Sales Data</.uk_caption>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the caption element.

Slots

• inner_block (required)

Renders a UIkit card.

Cards are layout boxes with modifiers for style and size. They can contain a header, body, and footer.

Examples

<.uk_card>
  <:header>
    <.uk_card_title>Title</.uk_card_title>
  </:header>
  <:body>
    Content
  </:body>
  <:footer>
    Footer content
  </:footer>
</.uk_card>

Attributes

• variant (:string) - the style variant of the card. Defaults to "default". Must be one of "default", "primary", or "secondary".
• size (:string) - the padding size of the card. Defaults to nil. Must be one of nil, "small", or "large".
• hover (:boolean) - whether to add a hover effect. Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the card container.

Slots

• header - the card header content.
• body - the card body content.
• footer - the card footer content. Accepts attributes:
  • class (:any) - additional CSS classes for the footer.
• inner_block - inner content, if not using structured slots.

Renders a title for the card component.

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the title.

Slots

• inner_block (required) - the title text.

Renders a UIkit comment.

Comments display user-generated content with an avatar, author info, and body text.

Examples

<.uk_comment id="comment-1">
  <:avatar src="/images/avatar.jpg" width="80" height="80" alt="Author" />
  <:title>Author Name</:title>
  <:meta>12 days ago</:meta>
  <:meta><a href="#">Reply</a></:meta>
  <:body>
    <p>Comment text goes here.</p>
  </:body>
</.uk_comment>

<.uk_comment id="comment-admin" primary>
  <:avatar src="/images/admin.jpg" width="80" height="80" alt="Admin" />
  <:title>Admin</:title>
  <:meta>5 minutes ago</:meta>
  <:body>
    <p>Highlighted admin response.</p>
  </:body>
</.uk_comment>

Attributes

• id (:string) - the DOM ID of the comment. Defaults to nil.
• primary (:boolean) - whether to highlight the comment (e.g. admin). Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the comment container.

Slots

• avatar - the author avatar image. Accepts attributes:
  • src (:string) (required) - the image URL.
  • width (:string) - the image width.
  • height (:string) - the image height.
  • alt (:string) - the image alt text.
• title - the comment title (typically the author name).
• meta - meta information items (timestamp, reply link, etc.).
• body - the comment body content.
• inner_block - inner content, if not using structured slots.

Renders a UIkit comment list for threaded comment layouts.

Wrap comments in <li> elements. Nest a <ul> inside an <li> for replies.

Examples

<.uk_comment_list>
  <li>
    <.uk_comment id="comment-1">
      <:avatar src="/images/user1.jpg" width="80" height="80" alt="User 1" />
      <:title>User 1</:title>
      <:meta>12 days ago</:meta>
      <:body><p>Top-level comment.</p></:body>
    </.uk_comment>
    <ul>
      <li>
        <.uk_comment id="comment-1-1">
          <:avatar src="/images/user2.jpg" width="80" height="80" alt="User 2" />
          <:title>User 2</:title>
          <:meta>6 days ago</:meta>
          <:body><p>A nested reply.</p></:body>
        </.uk_comment>
      </li>
    </ul>
  </li>
</.uk_comment_list>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the comment list.

Slots

• inner_block (required) - the comment list items (li elements).

Renders a UIkit container.

Containers constrain the width of the content and center it.

Examples

<.uk_container size="small">
  Content
</.uk_container>

Attributes

• size (:string) - the max-width of the container. Defaults to nil. Must be one of nil, "xsmall", "small", "large", "xlarge", or "expand".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the container.

Slots

• inner_block (required) - the container content.

Renders a UIkit dropdown.

Dropdowns are toggleable overlays that can contain any content. The toggle element (typically a button) should be placed immediately before the dropdown, or both can be wrapped in a uk-inline container.

Examples

<div class="uk-inline">
  <.uk_button>Hover</.uk_button>
  <.uk_dropdown id="my-dropdown">
    <p>Dropdown content</p>
  </.uk_dropdown>
</div>

<div class="uk-inline">
  <.uk_button>Click Me</.uk_button>
  <.uk_dropdown id="click-dropdown" mode="click" pos="top-center">
    <p>Click-triggered dropdown</p>
  </.uk_dropdown>
</div>

<div class="uk-inline">
  <.uk_button>Navigation</.uk_button>
  <.uk_dropdown id="nav-dropdown">
    <:nav>
      <li class="uk-active"><a href="/dashboard">Dashboard</a></li>
      <li><a href="/settings">Settings</a></li>
      <li class="uk-nav-header">More</li>
      <li class="uk-nav-divider"></li>
      <li><a href="/logout">Logout</a></li>
    </:nav>
  </.uk_dropdown>
</div>

Attributes

• id (:string) (required) - stable DOM id (required for LiveView hook).
• mode (:string) - the trigger mode (default: click, hover). Defaults to nil. Must be one of nil, "click", "hover", or "click, hover".
• pos (:string) - the position of the dropdown (e.g. bottom-left, top-center, right-top). Defaults to nil.
• offset (:integer) - offset in pixels from the toggle. Defaults to nil.
• delay_show (:integer) - delay in ms before showing on hover. Defaults to nil.
• delay_hide (:integer) - delay in ms before hiding on hover loss. Defaults to nil.
• stretch (:string) - stretch the dropdown to fill available space. Defaults to nil. Must be one of nil, "true", "x", or "y".
• animation (:string) - the animation class (e.g. uk-animation-slide-top-small). Defaults to nil.
• animate_out (:boolean) - whether to animate when closing. Defaults to false.
• duration (:integer) - animation duration in ms. Defaults to nil.
• flip (:boolean) - whether to flip if there is not enough space. Defaults to nil.
• shift (:boolean) - whether to shift to stay within the boundary. Defaults to nil.
• auto_update (:boolean) - whether to reposition on scroll/resize. Defaults to nil.
• close_on_scroll (:boolean) - whether to close on scroll. Defaults to false.
• large (:boolean) - whether to use larger padding. Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the dropdown container.

Slots

• nav - renders a uk-nav uk-dropdown-nav list. Place <li> elements inside. Accepts attributes:
  • class (:any) - additional CSS classes for the nav.
• inner_block - the dropdown content.

Renders a UIkit grid.

The grid component creates a responsive, fluid and nestable grid layout.

Examples

<.uk_grid gap="small" match>
  <div>Item 1</div>
  <div>Item 2</div>
</.uk_grid>

Attributes

• gap (:string) - the grid gap size. Defaults to nil. Must be one of nil, "small", "medium", "large", or "collapse".
• divider (:boolean) - whether to show a divider between cells. Defaults to false.
• match (:boolean) - whether to match the height of grid cells. Defaults to false.
• masonry (:string) - enables masonry layout. Defaults to nil. Must be one of nil, "pack", "next", or "true".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the grid container.

Slots

• inner_block (required) - the grid items.

Renders a UIkit icon.

Uses the UIkit icon system to display SVG icons. Can be rendered as a standalone icon, a link, or an icon button.

Examples

<.uk_icon name="check" />
<.uk_icon name="heart" ratio={2} />
<.uk_icon name="trash" button href="/delete" />
<.uk_icon name="twitter" href="https://twitter.com" />

Attributes

• name (:string) (required) - the name of the icon.
• ratio (:any) - the size multiplier of the icon (integer or float). Defaults to 1.
• id (:string) - optional DOM ID. Defaults to nil.
• button (:boolean) - whether to render as an icon button. Defaults to false.
• class (:any) - additional CSS classes.
• Global attributes are accepted. the arbitrary HTML attributes to add to the icon container. Supports all globals plus: ["href", "navigate", "patch", "method", "download", "uk-icon", "uk-toggle"].

Renders a UIkit label.

Labels are used to indicate a status or category.

Examples

<.uk_label>Default</.uk_label>
<.uk_label variant="success">Success</.uk_label>
<.uk_label variant="warning">Warning</.uk_label>
<.uk_label variant="danger">Danger</.uk_label>

Attributes

• variant (:string) - the visual style of the label. Defaults to nil. Must be one of nil, "success", "warning", or "danger".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the label container.

Slots

• inner_block (required) - the content of the label.

Renders a UIkit modal.

Modals provide a dialog box that sits on top of the main content.

Examples

<.uk_modal id="my-modal">
  <:header>
    <.uk_modal_title>Modal Title</.uk_modal_title>
  </:header>
  <:body>
    <p>Modal content goes here.</p>
  </:body>
  <:footer class="uk-text-right">
    <.uk_button class="uk-modal-close">Cancel</.uk_button>
    <.uk_button variant="primary">Save</.uk_button>
  </:footer>
</.uk_modal>

To trigger the modal, use uk-toggle:

<.uk_button uk_toggle="target: #my-modal">Open Modal</.uk_button>

To trigger the modal from an assign:

<.uk_modal id="my-modal" show={@show_modal} on_close="close_modal">
  ...
</.uk_modal>

Attributes

• id (:string) (required) - the DOM ID of the modal.
• center (:boolean) - whether to vertically center the modal. Defaults to false.
• container (:any) - target container. Defaults to false for LiveView compatibility (stays in DOM). Defaults to false.
• full (:boolean) - whether to make the modal full screen. Defaults to false.
• esc_close (:boolean) - whether the modal can be closed by pressing the Esc key. Defaults to true.
• bg_close (:boolean) - whether the modal can be closed by clicking on the background. Defaults to true.
• stack (:boolean) - whether modals should stack. Defaults to false.
• show (:boolean) - programmatically show/hide the modal. Defaults to nil.
• on_close (:string) - event to push when modal is closed manually. Defaults to nil.
• class (:any) - additional CSS classes for the modal container. Defaults to nil.
• dialog_class (:any) - additional CSS classes for the modal dialog. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the modal container.

Slots

• header - the modal header content.
• body - the modal body content.
• footer - the modal footer content. Accepts attributes:
  • class (:any) - additional CSS classes for the footer.
• close - custom close button. If not provided, a default one is included.
• inner_block - inner content, if not using structured slots.

Renders a title for the modal component.

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the title.

Slots

• inner_block (required) - the title text.

Renders a UIkit section.

Sections are used to create horizontal layout blocks.

Examples

<.uk_section variant="primary">
  Content
</.uk_section>

Attributes

• variant (:string) - the color variant of the section. Defaults to "default". Must be one of "default", "muted", "primary", or "secondary".
• size (:string) - the vertical padding size. Defaults to nil. Must be one of nil, "xsmall", "small", "large", "xlarge", or "remove-vertical".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the section container.

Slots

• inner_block (required) - the section content.

Renders a UIkit sortable container.

Enables drag and drop reordering of items.

Important: IDs and LiveView

To ensure reordering works correctly with LiveView:

1. Provide an id to the <.uk_sortable> container.
2. Every child element inside the sortable container must have a unique id.
3. Use the Sortable hook for server-side integration.

Examples

<.uk_sortable id="my-sortable" group="my-group" grid phx-hook="Sortable">
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
</.uk_sortable>

Attributes

• id (:string) (required) - the DOM ID of the container (required for hooks).
• group (:string) - the group name for dragging between lists. Defaults to nil.
• animation (:integer) - animation duration in milliseconds. Defaults to nil.
• threshold (:integer) - mouse move threshold before dragging starts. Defaults to nil.
• handle (:string) - selector for the drag handle. Defaults to nil.
• cls_custom (:string) - custom class for the dragged item. Defaults to nil.
• grid (:boolean) - whether to apply the grid component behavior. Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the sortable container.

Slots

• inner_block (required) - the sortable items.

Renders a UIkit spinner.

Spinners are used to indicate loading states.

Examples

<.uk_spinner />
<.uk_spinner ratio={2} />

Attributes

• ratio (:any) - the size multiplier of the spinner (integer or float). Defaults to 1.
• id (:string) - the DOM ID of the spinner. Defaults to nil.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the spinner container.

Renders a UIkit subnav.

Subnavs are used to create navigation for smaller sections of a page.

Important: IDs and LiveView

When using switcher or active attributes, UIkit and LiveView both manipulate the DOM. To prevent "ghost" nodes or duplicated elements during patching, always provide a unique id to the <.uk_subnav> component. The component will then automatically generate stable IDs for all nested items and links.

Examples

<.uk_subnav id="my-subnav" pill switcher="connect: #my-content">
  <:item href="#1">Item 1</:item>
  <:item href="#2">Item 2</:item>
</.uk_subnav>

Attributes

• divider (:boolean) - whether to show a divider between items. Defaults to false.
• pill (:boolean) - whether to show items as pills. Defaults to false.
• switcher (:any) - options for uk-switcher. Defaults to false.
• active (:integer) - the index of the active item (programmatic control). Defaults to nil.
• id (:string) (required) - the DOM ID of the subnav (required for stability).
• on_change (:string) - event to push when switcher changes. Defaults to nil.
• class (:any) - additional CSS classes for the list. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the subnav container.

Slots

• item - the navigation items. Accepts attributes:
  • id (:string) - the DOM ID of the item. Falling back to an auto-generated ID if the parent has one.
  • href (:string) - the link destination.
  • active (:boolean) - whether the item is currently active.
  • disabled (:boolean) - whether the item is disabled.
  • class (:any) - additional CSS classes for the item container (li).

Renders a UIkit switcher content container.

Important: IDs

The id provided here must match the connect selector used in the corresponding navigation component (e.g., <.uk_subnav switcher="connect: #my-id">).

Examples

<.uk_subnav id="my-nav" switcher="connect: #my-switcher">
  <:item href="#">Item 1</:item>
  <:item href="#">Item 2</:item>
</.uk_subnav>

<.uk_switcher id="my-switcher">
  <li>Content 1</li>
  <li>Content 2</li>
</.uk_switcher>

Attributes

• id (:string) (required) - the DOM ID of the switcher.
• animation (:string) - animation modifier. Defaults to nil.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the switcher container.

Slots

• inner_block (required) - the content panes (li elements).

Renders a UIkit table.

Applies UIkit table styling modifiers and optionally wraps in a responsive scrollable container. Use uk_thead, uk_tbody, uk_tfoot, and uk_caption components inside for full control over attributes on each section.

Column-level classes (uk-table-shrink, uk-table-expand, uk-table-link) are applied directly on <th> or <td> elements, not as component attributes.

Examples

<.uk_table striped divider>
  <.uk_thead>
    <tr>
      <th class="uk-table-shrink">#</th>
      <th class="uk-table-expand">Name</th>
      <th>Status</th>
    </tr>
  </.uk_thead>
  <.uk_tbody>
    <tr :for={row <- @rows}>
      <td>{row.id}</td>
      <td>{row.name}</td>
      <td>{row.status}</td>
    </tr>
  </.uk_tbody>
</.uk_table>

# With attributes on tbody (e.g. for sortable rows)
<.uk_table hover responsive>
  <.uk_thead>
    <tr><th>Column</th></tr>
  </.uk_thead>
  <.uk_tbody id="sortable-rows" phx-hook="Sortable">
    <tr><td>Draggable row</td></tr>
  </.uk_tbody>
</.uk_table>

Attributes

• striped (:boolean) - alternates row background colors. Defaults to false.
• divider (:boolean) - adds dividers between rows. Defaults to false.
• hover (:boolean) - adds hover highlighting to rows. Defaults to false.
• small (:boolean) - reduces cell padding. Defaults to false.
• large (:boolean) - increases cell padding. Defaults to false.
• justify (:boolean) - removes padding from outermost cells. Defaults to false.
• middle (:boolean) - vertically centers cell content. Defaults to false.
• responsive (:boolean) - wraps in a scrollable container for small screens. Defaults to false.
• caption_bottom (:boolean) - moves the caption below the table. Defaults to false.
• class (:any) - additional CSS classes for the table element. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to add to the table element.

Slots

• inner_block (required) - table content (use uk_thead, uk_tbody, etc.).

Renders a table body section (<tbody>).

Accepts @rest attributes, making it easy to add id, phx-hook, etc.

Example

<.uk_tbody id="sortable-rows" phx-hook="Sortable">
  <tr :for={row <- @rows}><td>{row.name}</td></tr>
</.uk_tbody>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the tbody element.

Slots

• inner_block (required)

Renders a table footer section (<tfoot>).

Example

<.uk_tfoot>
  <tr><td colspan="3">Total: 42</td></tr>
</.uk_tfoot>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the tfoot element.

Slots

• inner_block (required)

Renders a table header section (<thead>).

Example

<.uk_thead class="uk-background-muted">
  <tr><th>Name</th><th>Value</th></tr>
</.uk_thead>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the thead element.

Slots

• inner_block (required)