Resizable Panels

Resizable panels component for split layouts like IDEs or dashboards. Users can drag to resize panels horizontally or vertically.

Horizontal Panels

Left Panel

Drag the divider to resize

Right Panel

Resizable content area


          <.resizable_panels id="split-layout" orientation={:horizontal}>
            <:panel min_width="200px" default_width="300px">
              <div class="p-4">Left Panel</div>
            </:panel>
            <:panel>
              <div class="p-4">Right Panel</div>
            </:panel>
          </.resizable_panels>

Props

Prop	Type	Default	Description
id	string	-	Unique ID for the panels
orientation	:horizontal \| :vertical	:horizontal	Layout orientation
panel.min_width	string	"100px"	Minimum panel width
panel.default_width	string	nil	Initial panel width