Tailwind CSS Layout Splitter

Customize block sizes and create responsive layouts with Tailwind CSS Layout Splitters for better design flexibility in your web projects.

Requires JS

Note that this component requires the use of our Layout Splitter plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Horizontal direction

A simple example demonstrating a horizontal layout splitter in action.

Theme:

Vertical direction

Below an example showing a vertical layout with adjustable panels. Drag the splitter handles to resize the blocks.

Theme:

<div data-hs-layout-splitter='{
                        "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-white border border-gray-200 text-gray-400 rounded-md cursor-row-resize hover:bg-gray-100 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-600 dark:hover:bg-neutral-900\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                        "verticalSplitterClasses": "relative flex border-t border-line-2"
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>

Mixed direction

This example shows a layout with both horizontal and vertical splitters.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5"><div data-hs-layout-splitter='{
                        "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                        "horizontalSplitterClasses": "relative flex border-s border-line-2",
                        "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                        "verticalSplitterClasses": "relative flex border-t border-line-2"
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div data-hs-layout-splitter='{
                        "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                        "horizontalSplitterClasses": "relative flex border-s border-line-2",
                        "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                        "verticalSplitterClasses": "relative flex border-t border-line-2"
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>

Manually added splitters

See how to use layout splitters by adding the splitter controls manually.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5"><div data-hs-layout-splitter='{
                        "isSplittersAddedManually": true
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                            <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                            </span>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                            <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                            </span>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div data-hs-layout-splitter='{
                        "isSplittersAddedManually": true
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                            <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                            </span>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                            <span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                            </span>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>

Limit size

A splitter with minimum and maximum panel sizes.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5"><div id="hs-layout-splitter-limit-size" data-hs-layout-splitter='{
                        "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                        "horizontalSplitterClasses": "relative flex border-s border-line-2",
                        "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                        "verticalSplitterClasses": "relative flex border-t border-line-2"
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 30.0,
                            "minSize": 10.0
                          }' style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 50.0,
                            "minSize": 10.0
                          }' style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full hs-prev-limit-reached:bg-surface-1" data-hs-layout-splitter-item='{
                                "dynamicSize": 48.2,
                                "minSize": 5.0
                              }' style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                "dynamicSize": 30.0,
                                "minSize": 10.0
                              }' style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                "dynamicSize": 21.8,
                                "minSize": 10.0
                              }' style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 20.0,
                            "minSize": 5.0
                          }' style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div id="hs-layout-splitter-limit-size" data-hs-layout-splitter='{
                        "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                        "horizontalSplitterClasses": "relative flex border-s border-line-2",
                        "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                        "verticalSplitterClasses": "relative flex border-t border-line-2"
                      }'>
                        <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 30.0,
                            "minSize": 10.0
                          }' style="flex: 30 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 50.0,
                            "minSize": 10.0
                          }' style="flex: 50 1 0px;">
                            <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                              <div class="overflow-hidden h-full hs-prev-limit-reached:bg-surface-1" data-hs-layout-splitter-item='{
                                "dynamicSize": 48.2,
                                "minSize": 5.0
                              }' style="flex: 48.2 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                "dynamicSize": 30.0,
                                "minSize": 10.0
                              }' style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                "dynamicSize": 21.8,
                                "minSize": 10.0
                              }' style="flex: 21.8 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                              </div>
                            </div>
                          </div>
                          <div class="overflow-hidden" data-hs-layout-splitter-item='{
                            "dynamicSize": 20.0,
                            "minSize": 5.0
                          }' style="flex: 20 1 0px;">
                            <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                          </div>
                        </div>
                      </div>

Destroy and Reinitialize

Provides destroy method that helps to destroy a layout splitter.

Theme:

<div class="flex flex-wrap gap-2 mt-4">
                      <button type="button" id="hs-destroy-layout-splitter" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                        Destroy layout splitter
                      </button>
                      <button type="button" id="hs-auto-init-layout-splitter" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                        Reinitialize layout splitter
                      </button>
                    </div>
                        <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        <script>
                          window.addEventListener('load', () => {
                            (function() {
                              const layoutSplitter = document.querySelector('#hs-layout-splitter-to-destroy');
                              const destroy = document.querySelector('#hs-destroy-layout-splitter');
                              const autoInit = document.querySelector('#hs-auto-init-layout-splitter');

destroy.addEventListener('click', () => {
                                const {element} = HSLayoutSplitter.getInstance(layoutSplitter, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSLayoutSplitter.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>
                      </body>
                    </html>

<div id="hs-layout-splitter-to-destroy" data-hs-layout-splitter='{
                      "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                      "horizontalSplitterClasses": "relative flex border-s border-line-2",
                      "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                      "verticalSplitterClasses": "relative flex border-t border-line-2"
                    }'>
                      <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                        <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                          <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                        </div>
                        <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                          <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                            <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                              <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                            </div>
                            <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                              <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                            </div>
                            <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                              <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                            </div>
                          </div>
                        </div>
                        <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                          <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                        </div>
                      </div>
                    </div>

destroy.addEventListener('click', () => {
                            const {element} = HSLayoutSplitter.getInstance(layoutSplitter, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                            autoInit.removeAttribute('disabled');
                          });

autoInit.addEventListener('click', () => {
                            HSLayoutSplitter.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                            destroy.removeAttribute('disabled');
                          });
                        })();
                      });
                    </script>

Tailwind CSS Layout Splitter

Requires JS

Basic usage

Horizontal direction

Vertical direction

Mixed direction

Manually added splitters

Limit size

Destroy and Reinitialize

On this page