Blocks

Drawer

A slide-in panel anchored to any edge of the viewport — supports right, left, top, and bottom sides with animated open/close transitions.

Usage

Wrap everything in sui.drawer. The trigger slides in the panel from the chosen side.

Drawer

Side panel content goes here.

Body content.

sui.drawer do
  sui.drawer_trigger "Open drawer", variant: :outline
  sui.drawer_content do
    sui.drawer_header do
      sui.drawer_title "Drawer"
      sui.drawer_description "Side panel content goes here."
    end
    tag.div("Body content.", class: "p-4 text-sm")
  end
end

Sides

Pass side: to drawer_content — one of :right (default), :left, :top, :bottom.

Right drawer

Slides in from the right.

Content panel.

Left drawer

Slides in from the left.

Content panel.

Top drawer

Slides down from the top.

Content panel.

Bottom drawer

Slides up from the bottom.

Content panel.

sui.drawer do
  sui.drawer_trigger "Left", variant: :outline
  sui.drawer_content(side: :left) do
    sui.drawer_header { sui.drawer_title "Left drawer" }
  end
end

Settings drawer

A practical example with a header, scrollable body, and sticky footer.

Settings

Manage your account preferences.

Dark mode

Notifications

sui.drawer do
  sui.drawer_trigger "Settings", variant: :outline
  sui.drawer_content do
    sui.drawer_header do
      sui.drawer_title "Settings"
      sui.drawer_description "Manage your account preferences."
    end
    tag.div(class: "flex-1 overflow-y-auto p-4 space-y-4") do
      tag.div(class: "flex items-center justify-between") do
        sui.label("Dark mode") + sui.switch(name: "dark_mode")
      end +
      tag.div(class: "flex items-center justify-between") do
        sui.label("Notifications") + sui.switch(name: "notifications", checked: true)
      end
    end
    sui.drawer_footer do
      sui.button "Save changes"
    end
  end
end

API

Method	Key args	Default	Description
drawer	**opts	—	Root container; mounts the Stimulus controller
drawer_trigger	name, variant:, size:	:default, :md	Button that opens the drawer panel on click
drawer_content	side:	:right	Backdrop + anchored panel; `side:` is `:right` `:left` `:top` `:bottom`
drawer_header	**opts	—	Padded flex column for title and description
drawer_footer	**opts	—	Sticky bottom area with padding for action buttons
drawer_title	name	nil	Semibold heading rendered as `h2`
drawer_description	name	nil	Muted supporting text rendered as `p`