Sheet

Extends Dialog to show complementary content sliding in from an edge of the screen.

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

The sheet registry item installs these files:

app/components/ui_component.rb
app/components/ui/sheet_component.rb
app/components/ui/sheet/trigger_component.rb
app/components/ui/sheet/content_component.rb
app/components/ui/sheet/header_component.rb
app/components/ui/sheet/footer_component.rb
app/components/ui/sheet/title_component.rb
app/components/ui/sheet/description_component.rb
app/components/ui/sheet/close_component.rb
app/components/ui/button_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/sheet_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

The same contract as Dialog (the native <dialog> + controller ui-dialog), with the panel anchored to an edge through side:.

<%= ui_sheet do %>
  <%= ui_sheet_trigger(variant: :outline) { "Open" } %>
  <%= ui_sheet_content(side: :right) do %>
    <%= ui_sheet_header do %>
      <%= ui_sheet_title { "Title" } %>
      <%= ui_sheet_description { "The panel's description." } %>
    <% end %>
    <%= ui_sheet_footer do %>

<%= ui_sheet do %>
  <%= ui_sheet_trigger(variant: :outline) { "Open" } %>
  <%= ui_sheet_content(side: :right) do %>
    <%= ui_sheet_header do %>
      <%= ui_sheet_title { "Title" } %>
      <%= ui_sheet_description { "The panel's description." } %>
    <% end %>
    <%= ui_sheet_footer do %>
      <%= ui_sheet_close { "Close" } %>
    <% end %>
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::SheetComponent.new do %>
  <%= render Ui::Sheet::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Sheet::ContentComponent.new(side: :left) do %>
    <%= render Ui::Sheet::TitleComponent.new do %>
      Title
    <% end %>

<%= render Ui::SheetComponent.new do %>
  <%= render Ui::Sheet::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Sheet::ContentComponent.new(side: :left) do %>
    <%= render Ui::Sheet::TitleComponent.new do %>
      Title
    <% end %>
  <% end %>
<% end %>

Composition

Sheet (ui-dialog)
|-- Sheet::Trigger (Button)
`-- Sheet::Content (<dialog> anchored to an edge, side:)
    |-- Sheet::Header > Sheet::Title + Sheet::Description
    `-- Sheet::Footer > Sheet::Close (Button)

Examples

Default

A panel sliding in from the right, with a form and a footer.

<%= ui_sheet do %>
  <%= ui_sheet_trigger(variant: :outline) { "Open sheet" } %>
  <%= ui_sheet_content do %>
    <%= ui_sheet_header do %>
      <%= ui_sheet_title { "Edit profile" } %>
      <%= ui_sheet_description { "Make changes to your profile and save when you are done." } %>
    <% end %>
    <div class="grid gap-4 px-4">

<%= ui_sheet do %>
  <%= ui_sheet_trigger(variant: :outline) { "Open sheet" } %>
  <%= ui_sheet_content do %>
    <%= ui_sheet_header do %>
      <%= ui_sheet_title { "Edit profile" } %>
      <%= ui_sheet_description { "Make changes to your profile and save when you are done." } %>
    <% end %>
    <div class="grid gap-4 px-4">
      <div class="grid gap-2">
        <%= ui_label(for: "sheet-profile-name") { "Name" } %>
        <%= ui_input(id: "sheet-profile-name", value: "Eduardo de Moraes") %>
      </div>
    </div>
    <%= ui_sheet_footer do %>
      <%= ui_button { "Save changes" } %>
      <%= ui_sheet_close { "Close" } %>
    <% end %>
  <% end %>
<% end %>

All four sides

side: :right, :left, :top or :bottom sets the edge it comes from and the animation.

<% { right: "Right", left: "Left", top: "Top", bottom: "Bottom" }.each do |side, label| %>
  <%= ui_sheet do %>
    <%= ui_sheet_trigger(variant: :outline) { label } %>
    <%= ui_sheet_content(side: side) do %>
      <%= ui_sheet_header do %>
        <%= ui_sheet_title { "Sheet: #{label.downcase}" } %>
        <%= ui_sheet_description { "This panel slides in from the #{side}." } %>
      <% end %>

<% { right: "Right", left: "Left", top: "Top", bottom: "Bottom" }.each do |side, label| %>
  <%= ui_sheet do %>
    <%= ui_sheet_trigger(variant: :outline) { label } %>
    <%= ui_sheet_content(side: side) do %>
      <%= ui_sheet_header do %>
        <%= ui_sheet_title { "Sheet: #{label.downcase}" } %>
        <%= ui_sheet_description { "This panel slides in from the #{side}." } %>
      <% end %>
      <%= ui_sheet_footer do %>
        <%= ui_sheet_close { "Close" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Sheet`	`close_on_backdrop`	`true`	Closes on a click outside the panel.
`Sheet::Content`	`side`	`:right`	`:right`, `:left`, `:top` or `:bottom`. Sets `data-side`.
`Sheet::Content`	`show_close_button`	`true`	Renders the X button in the top-right corner.
`Sheet::Trigger` / `Sheet::Close`	`variant`, `size`	`:outline`, `:default`	Wrap `Ui::ButtonComponent`.

Documentation

Sheet

Installation

Usage

Composition

Examples

Default

Edit profile

All four sides

Sheet: right

Sheet: left

Sheet: top

Sheet: bottom

API reference