SVAR React Layout

Website • Getting Started • Demos

SVAR React Layout is a library of React components for building flexible, resizable panel layouts. It provides an intuitive way to create IDE-style interfaces with collapsible panels, resizable sections, and nested layouts.

:jigsaw: Included Components

SVAR React Layout library includes the following components:

Layout is the main container component that arranges child cells in rows or columns with support for resizable dividers, configurable gaps and padding, and layout presets.

Cell is a flexible content area within a Layout that supports fixed or proportional sizing, optional headers, and scrollable content.

Panel extends Cell with collapsible behavior, adding a toggle button and animated collapse/expand transitions in both row and column directions.

:sparkles: Key features:

• Resizable panels: drag-to-resize dividers between cells with live size feedback.
• Collapsible panels: panels can collapse and expand with smooth CSS transitions.
• Nested layouts: layouts can be nested for complex IDE-style arrangements (rows inside columns and vice versa).
• Layout presets: built-in presets (clean, line, wide, space) for common gap/padding combinations.
• Flexible sizing: cells support fixed width/height, proportional grow factors, and minimum size constraints.
• Intuitive, straightforward API: easily configure layouts, track resize events, and control panel state.
• Full TypeScript support and compatibility with React 18 and 19.

Check out the demos to see all SVAR React Layout features in action.

:hammer_and_wrench: How to Use

To start using the components from the Layout package, simply import the package and include the desired component in your React file:

import { useState } from "react";
import { Layout, Cell, Panel } from "@wx/react-layout";
import "@wx/react-layout/all.css";

function App() {
  const [sidebarWidth, setSidebarWidth] = useState(200);

  return (
    <Layout
      direction="row"
      padding={6}
      resizable
      onCellResize={(s) => setSidebarWidth(s[0])}
    >
      <Panel label="Files" width={sidebarWidth} minWidth={100}>
        <p>File tree ({Math.round(sidebarWidth)}px)</p>
      </Panel>
      <Cell>
        <Layout preset="line">
          <Cell grow={3} header={<span>Editor</span>}>
            <p>Editor area</p>
          </Cell>
          <Panel grow={1} label="Terminal">
            <p>Terminal</p>
          </Panel>
        </Layout>
      </Cell>
    </Layout>
  );
}

See the getting started guide to quickly set up and begin using SVAR Layout components in your React projects.

:speech_balloon: Need Help?

Post an Issue or use our community forum.