Drawer

A panel sliding in from an edge, built on the native <dialog>, with drag-to-close.

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 drawer --yes

The drawer registry item installs these files:

app/components/ui_component.rb
app/components/ui/drawer_component.rb
app/components/ui/drawer/trigger_component.rb
app/components/ui/drawer/content_component.rb
app/components/ui/drawer/header_component.rb
app/components/ui/drawer/footer_component.rb
app/components/ui/drawer/title_component.rb
app/components/ui/drawer/description_component.rb
app/components/ui/drawer/close_component.rb
app/components/ui/button_component.rb
app/helpers/ui/drawer_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_drawer_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

<%= ui_drawer do %>
  <%= ui_drawer_trigger { "Open" } %>
  <%= ui_drawer_content do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Title" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Default

A bottom drawer with a header, a description and actions.

<%= ui_drawer do %>
  <%= ui_drawer_trigger(variant: :outline) { "Open drawer" } %>
  <%= ui_drawer_content(class: "mx-auto max-w-md") do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Move to trash?" } %>
      <%= ui_drawer_description { "You can restore this item later." } %>
    <% end %>
    <%= ui_drawer_footer do %>

<%= ui_drawer do %>
  <%= ui_drawer_trigger(variant: :outline) { "Open drawer" } %>
  <%= ui_drawer_content(class: "mx-auto max-w-md") do %>
    <%= ui_drawer_header do %>
      <%= ui_drawer_title { "Move to trash?" } %>
      <%= ui_drawer_description { "You can restore this item later." } %>
    <% end %>
    <%= ui_drawer_footer do %>
      <%= ui_button { "Confirm" } %>
      <%= ui_drawer_close(variant: :outline) { "Cancel" } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Drawer`	`close_on_backdrop`	`true`	Closes on a click outside the panel.
`Drawer::Trigger`	`variant`	`:outline`	Passed to the button it renders: any Button variant.
`Drawer::Trigger`	`size`	`:default`	Passed to the button it renders: any Button size.
`Drawer::Content`	`side`	`:bottom`	The edge it slides in from: `:bottom`, `:top`, `:right` or `:left`. Top and bottom drawers get a drag handle.
`Drawer::Title`	`tag`	`:h2`	The heading element.
`Drawer::Title`	`tag_name`	`nil`	The old name of `tag:`, still accepted.
`Drawer::Close`	`variant`	`:outline`	Passed to the button it renders: any Button variant.
`Drawer::Close`	`size`	`:default`	Passed to the button it renders: any Button size.