Splitter
Resizable split panels with drag handle
Navigation
Project workspace
Keep the navigation panel compact while the main workspace expands.
- Overview
- Automations
- Deployments
Editor
Resizable content area
Drag the handle or use the arrow keys to rebalance space between the two panels.
Accessibility
- This component does not add meaning by itself; ensure child content supplies the required headings, labels, and landmarks.
- Only add landmark or region semantics when the section has a unique, meaningful label.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Splitter } from '@dryui/ui';
</script>
<Splitter.Root>
<Splitter.Panel>...</Splitter.Panel>
<Splitter.Handle>...</Splitter.Handle>
</Splitter.Root>Import options
Root package
ts
import { Splitter } from '@dryui/ui'Per-component subpath
ts
import { Splitter } from '@dryui/ui/splitter'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Splitter.Root | |||||
| orientation | horizontalvertical | Horizontal or vertical layout direction. | 'horizontal' | — | — |
| sizes | number[] | — | $bindable([50 | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Splitter.Panel | |||||
| index | number | — | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Splitter.Handle | |||||
| index | number | — | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | — | — |