SVAR Svelte Layout

Documentation • Demos

SVAR Layout is a ready-to-use Svelte component for building resizable, collapsible panel UIs. Create IDE-style layouts with draggable splitters, flexible cells, and collapsible panels — all driven by simple props and presets.

Svelte 5

This library is built for Svelte 5. Install it as follows:

npm install @svar-ui/svelte-layout

How to Use

To use SVAR Svelte Layout, simply import the package and include the components in your Svelte file:

<script>
	import { Layout, Cell, Panel } from "@svar-ui/svelte-layout";
</script>

<Layout type="row" resizable>
	<Panel label="Sidebar" width={200} minWidth={100}>
		<p>Sidebar content</p>
	</Panel>
	<Cell>
		<Layout preset="line">
			<Cell gravity={3} label="Editor">
				<p>Main content</p>
			</Cell>
			<Panel gravity={1} label="Terminal">
				<p>Bottom panel</p>
			</Panel>
		</Layout>
	</Cell>
</Layout>

Components

• Layout — flex container with direction (row/column), presets (clean/line/wide/space), optional drag-resize
• Cell — flex child with fixed or proportional sizing via gravity, optional header
• Panel — collapsible cell with animated expand/collapse toggle

For more details, please visit the documentation.

How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Run yarn to install dependencies. Note that this project is a monorepo using yarn workspaces, so npm will not work
2. Start the project in development mode with yarn start