Usage
# <% Async drawer (loads content via Turbo Frame) %>
<%= ui.btn "Open Drawer", url: some_path, data: { turbo_frame: :drawer } %>
# <% Sync drawer (content already on page) %>
<%= ui.btn "Open Drawer", data: { drawers_target: "trigger", action: "click->drawers#show", id: "myDrawer" } %>
<%= ui.drawer(title: "Title", id: "myDrawer") do %>
<%= ui.drawer_body do %>
Content here
<% end %>
<% end %>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | nil | Drawer title displayed in the header. |
subtitle | String | nil | Drawer subtitle displayed below the title. |
size | String"sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "2xl" | Maximum width of the drawer panel. |
id | String | nil | Unique identifier for sync drawers. Required for drawers triggered by `drawers#show` action. |
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 |
|---|---|---|
drawer_header | ui.drawer_header | Header section with title, subtitle, and close button. Automatically rendered when title/subtitle props are provided. |
drawer_body | ui.drawer_body | Scrollable content area of the drawer. |
drawer_footer | ui.drawer_footer | Footer section typically containing action buttons. |
Examples
Async Drawer
<%= ui.btn "Async Drawer", url: terms_path, data: { turbo_frame: :drawer } %>Sync Drawer
<%= ui.btn "Sync Drawer", data: { drawers_target: "trigger", action: "click->drawers#show", id: "drawer1" } %>
<%= ui.drawer(title: "Info", id: "drawer1") do %>
<%= ui.drawer_body do %>
<p class="mb-6">Drawer content goes here.</p>
<% end %>
<%= ui.drawer_footer do %>
<%= ui.btn "Learn more", href: "#" %>
<%= ui.btn "Get access", href: "#" %>
<% end %>
<% end %>With Body and Footer
<%= ui.btn "Open Drawer", data: { drawers_target: "trigger", action: "click->drawers#show", id: "drawer1" } %>
<%= ui.drawer(title: "Info", id: "drawer1") do %>
<%= ui.drawer_body do %>
<% 3.times do %>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<% end %>
<% end %>
<%= ui.drawer_footer do %>
<%= ui.btn "Learn more", href: "#" %>
<%= ui.btn "Get access", href: "#" %>
<% end %>
<% end %>