Divide a layout into two resizable panes. Drag the gutter, use arrow keys when focused, or double-click the gutter to reset to 50%. Project panes with base-splitter-start and base-splitter-end.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Default orientation places panes side by side. Bind [(size)] to the primary (start) pane percentage.
Start pane
Navigation, filters, or a file tree.
End pane
Main content area. Primary size: 35%.
Stack panes with orientation="vertical". Give the host a height.
Top pane
Preview or toolbar region (40%).
Bottom pane
Details, logs, or a console.
Place another splitter inside a pane for IDE-style layouts.
Sidebar
30%
Editor
Top of the right column (55%).
Terminal
Bottom of the right column.
Constrain the primary pane with min / max. Use [disabled]="true" to lock the gutter.
Constrained (min 20%, max 40%)
Narrow start pane (25%)
Wide end pane
Disabled
Locked start
Locked end
Run the following command to add this component to your project:
npx base-ui-cli add splitter
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add splitter
// Paths are relative to aliases.components (default: src/app/components)
import { SplitterComponent } from './splitter/splitter.component';
@Component({
selector: 'app-your-component',
imports: [
SplitterComponent
],
template: `...`
})
export class YourComponent {} API for splitter — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-splitter | size | number | 50 | Primary pane size as a percentage of the track (0–100). |
base-splitter | orientation | SplitterOrientation | 'horizontal' | `horizontal` = side-by-side panes; `vertical` = stacked panes. |
base-splitter | min | number | 10 | Minimum primary pane size (%). |
base-splitter | max | number | 90 | Maximum primary pane size (%). |
base-splitter | step | number | 2 | Keyboard arrow step in percent. |
base-splitter | disabled | boolean | false | When true, dragging and keyboard resize are disabled. |
base-splitter | ariaLabel | unknown | 'Resize panels' | Accessible name for the separator. |
base-splitter | class | string | '' | Extra host classes merged via `cn()`. |
Content