Dialog

A window layered over the main page, built on the native <dialog> element.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add dialog --yes

The dialog registry item installs these files:

app/components/ui_component.rb
app/components/ui/dialog_component.rb
app/components/ui/dialog/trigger_component.rb
app/components/ui/dialog/content_component.rb
app/components/ui/dialog/header_component.rb
app/components/ui/dialog/footer_component.rb
app/components/ui/dialog/title_component.rb
app/components/ui/dialog/description_component.rb
app/components/ui/dialog/close_component.rb
app/components/ui/button_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/dialog_helper.rb
app/helpers/ui/button_helper.rb
app/helpers/ui/icon_helper.rb
app/javascript/controllers/ui_dialog_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

showModal() provides the focus trap, the top layer, Esc and focus restoration natively; the controller adds animations, closing through the backdrop, and the wiring for aria-labelledby/aria-describedby.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Open" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Title" } %>
      <%= ui_dialog_description { "The dialog's description." } %>
    <% end %>
    <%= ui_dialog_footer do %>

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Open" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Title" } %>
      <%= ui_dialog_description { "The dialog's description." } %>
    <% end %>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Cancel" } %>
    <% end %>
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::DialogComponent.new do %>
  <%= render Ui::Dialog::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Dialog::ContentComponent.new do %>
    <%= render Ui::Dialog::TitleComponent.new do %>
      Title
    <% end %>

<%= render Ui::DialogComponent.new do %>
  <%= render Ui::Dialog::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Dialog::ContentComponent.new do %>
    <%= render Ui::Dialog::TitleComponent.new do %>
      Title
    <% end %>
  <% end %>
<% end %>

Composition

Dialog (data-controller="ui-dialog")
|-- Dialog::Trigger (a Button that calls showModal)
`-- Dialog::Content (native <dialog>)
    |-- Dialog::Header > Dialog::Title + Dialog::Description
    `-- Dialog::Footer > Dialog::Close (Button)

Examples

Default

A profile form in a native <dialog>: focus trapping, Esc and focus restoration all come from the browser.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Edit profile" } %>
  <%= ui_dialog_content(class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Edit profile" } %>
      <%= ui_dialog_description { "Make changes to your profile and save when you are done." } %>
    <% end %>
    <div class="grid gap-4">

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Edit profile" } %>
  <%= ui_dialog_content(class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Edit profile" } %>
      <%= ui_dialog_description { "Make changes to your profile and save when you are done." } %>
    <% end %>
    <div class="grid gap-4">
      <div class="grid gap-2">
        <%= ui_label(for: "dialog-profile-name") { "Name" } %>
        <%= ui_input(id: "dialog-profile-name", value: "Eduardo de Moraes") %>
      </div>
      <div class="grid gap-2">
        <%= ui_label(for: "dialog-profile-username") { "Username" } %>
        <%= ui_input(id: "dialog-profile-username", value: "@edu") %>
      </div>
    </div>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Cancel" } %>
      <%= ui_button { "Save changes" } %>
    <% end %>
  <% end %>
<% end %>

No backdrop close

close_on_backdrop: false ignores clicks outside the panel.

<%= ui_dialog(close_on_backdrop: false) do %>
  <%= ui_dialog_trigger(variant: :outline) { "No backdrop close" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Heads up" } %>
      <%= ui_dialog_description { "Clicking outside will not close this dialog — use the X, Esc, or the button below." } %>
    <% end %>
    <%= ui_dialog_footer do %>

<%= ui_dialog(close_on_backdrop: false) do %>
  <%= ui_dialog_trigger(variant: :outline) { "No backdrop close" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Heads up" } %>
      <%= ui_dialog_description { "Clicking outside will not close this dialog — use the X, Esc, or the button below." } %>
    <% end %>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Got it" } %>
    <% end %>
  <% end %>
<% end %>

Custom footer

show_close_button: false drops the X; compose your own buttons with ui_dialog_close.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Share link" } %>
  <%= ui_dialog_content(show_close_button: false, class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Share" } %>
      <%= ui_dialog_description { "Anyone with this link will be able to view it." } %>
    <% end %>
    <div class="flex items-center gap-2">

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Share link" } %>
  <%= ui_dialog_content(show_close_button: false, class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Share" } %>
      <%= ui_dialog_description { "Anyone with this link will be able to view it." } %>
    <% end %>
    <div class="flex items-center gap-2">
      <%= ui_input(value: "https://shadwire.dev/docs", readonly: true, aria: { label: "Link" }) %>
      <%= ui_button(variant: :secondary) { "Copy" } %>
    </div>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close(variant: :secondary) { "Close" } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Dialog`	`close_on_backdrop`	`true`	Closes on a click outside the panel (on the `::backdrop`).
`Dialog::Trigger` / `Dialog::Close`	`variant`, `size`	`:outline`, `:default`	Wrap `Ui::ButtonComponent` with the open/close actions.
`Dialog::Content`	`show_close_button`	`true`	Renders the X button in the top-right corner.
`Dialog::Title` / `Dialog::Description`	—	—	Tied to the dialog through `aria-labelledby`/`aria-describedby` when it opens.