Resizable

Resizable panels with draggable handles and keyboard adjustment.

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

The resizable registry item installs these files:

app/components/ui_component.rb
app/components/ui/resizable_panel_group_component.rb
app/components/ui/resizable_panel_component.rb
app/components/ui/resizable_handle_component.rb
app/helpers/ui/resizable_helper.rb
app/javascript/controllers/ui_resizable_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_resizable_panel_group(direction: :horizontal) do %>
  <%= ui_resizable_panel(default_size: 50) { "One" } %>
  <%= ui_resizable_handle %>
  <%= ui_resizable_panel(default_size: 50) { "Two" } %>
<% end %>

Examples

Default

Two horizontal panels with one handle.

One

Two

<%= ui_resizable_panel_group(direction: :horizontal, class: "h-48 max-w-md rounded-lg border") do %>
  <%= ui_resizable_panel(default_size: 50, class: "flex items-center justify-center p-6 font-semibold") { "One" } %>
  <%= ui_resizable_handle(with_handle: true) %>
  <%= ui_resizable_panel(default_size: 50, class: "flex items-center justify-center p-6 font-semibold") { "Two" } %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`ResizablePanelGroup`	`direction`	`:horizontal`	`:horizontal` for panels side by side, `:vertical` for stacked ones.
`ResizablePanel`	`default_size`	`nil`	The panel's starting share, as a weight relative to its siblings.
`ResizableHandle`	`with_handle`	`false`	Draws a grip on the handle.