List - Rails UI Components

John Doe john@example.com
Jane Smith jane@example.com

Usage

<%= ui.list do %>
  <%= ui.list_item do %>
    <%= ui.list_icon "user" %>
    <%= ui.list_content do %>
      <strong>Title</strong>
      <span class="text-muted-foreground">Description</span>
    <% end %>
    <%= ui.list_action do %>
      <%= ui.btn "Action", size: :sm, variant: :ghost %>
    <% end %>
  <% end %>
<% end %>

<%= ui.list variant: :divided do %>
  <%= ui.list_item do %>Option 1<% end %>
  <%= ui.list_item do %>Option 2<% end %>
<% end %>

Props

Prop	Type	Default	Description
`variant`	`Symbol`	`:default`	Visual variant. The :divided variant adds separators between items.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`list_item`	`ui.list_item`	Individual list item container.
`list_icon`	`ui.list_icon`	Icon displayed at the start of the list item.
`list_content`	`ui.list_content`	Main content area that grows to fill available space.
`list_action`	`ui.list_action`	Container for action buttons, positioned at the end of the item.

Examples

Basic list

John Doe john@example.com
Jane Smith jane@example.com

<%= ui.list do %>
  <%= ui.list_item do %>
    <%= ui.list_icon "user" %>
    <%= ui.list_content do %>
      <strong>John Doe</strong>
      <span class="text-muted-foreground text-sm block">john@example.com</span>
    <% end %>
    <%= ui.list_action do %>
      <%= ui.btn "Edit", size: :sm, variant: :ghost %>
    <% end %>
  <% end %>
  <%= ui.list_item do %>
    <%= ui.list_icon "user" %>
    <%= ui.list_content do %>
      <strong>Jane Smith</strong>
      <span class="text-muted-foreground text-sm block">jane@example.com</span>
    <% end %>
    <%= ui.list_action do %>
      <%= ui.btn "Edit", size: :sm, variant: :ghost %>
    <% end %>
  <% end %>
<% end %>

Divided list

Inbox View your messages
Settings Manage your preferences
Sign out Log out of your account

<%= ui.list variant: :divided do %>
  <%= ui.list_item do %>
    <%= ui.list_icon "inbox" %>
    <%= ui.list_content do %>
      <strong>Inbox</strong>
      <span class="text-muted-foreground text-sm block">View your messages</span>
    <% end %>
  <% end %>
  <%= ui.list_item do %>
    <%= ui.list_icon "cog" %>
    <%= ui.list_content do %>
      <strong>Settings</strong>
      <span class="text-muted-foreground text-sm block">Manage your preferences</span>
    <% end %>
  <% end %>
  <%= ui.list_item do %>
    <%= ui.list_icon "arrow-right-on-rectangle" %>
    <%= ui.list_content do %>
      <strong>Sign out</strong>
      <span class="text-muted-foreground text-sm block">Log out of your account</span>
    <% end %>
  <% end %>
<% end %>

Simple list without icons

Option 1
Option 2
Option 3

<%= ui.list variant: :divided do %>
  <%= ui.list_item do %>Option 1<% end %>
  <%= ui.list_item do %>Option 2<% end %>
  <%= ui.list_item do %>Option 3<% end %>
<% end %>

List with multiple actions

Document.pdf 2.4 MB

<%= ui.list do %>
  <%= ui.list_item do %>
    <%= ui.list_icon "document" %>
    <%= ui.list_content do %>
      <strong>Document.pdf</strong>
      <span class="text-muted-foreground text-sm block">2.4 MB</span>
    <% end %>
    <%= ui.list_action do %>
      <%= ui.btn "Download", size: :sm, variant: :outline %>
      <%= ui.btn "Delete", size: :sm, variant: :ghost %>
    <% end %>
  <% end %>
<% end %>