GitHub55X

Splitter

Vue splitter for resizable panes that let users adjust layout width or height interactively.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/splitter.json

Usage

      
      <script setup lang="ts">
import { Splitter } from "@/components/ui/splitter";
</script>

<template>
  <Splitter.Root>
    <!-- … -->
  </Splitter.Root>
</template>

Composition

      
      Splitter.Root
├── Splitter.Context
├── Splitter.Panel
├── Splitter.ResizeTrigger
├── Splitter.ResizeTriggerIndicator
├── Splitter.RootProvider

Examples

Context

Access the splitter's API with Splitter.Context or the useSplitterContext hook. This lets you resize panels programmatically:

Vertical

By default, the Splitter component is horizontal. If you need a vertical splitter, use the orientation prop:

Collapsible Panels

To make a panel collapsible, set the collapsible prop to true on the panel you want to make collapsible. Additionally, you can use the collapsedSize prop to set the size of the panel when it's collapsed.

This can be useful for building sidebar layouts.

Multiple Panels

Here's an example of how to use the Splitter component with multiple panels.

Root Provider

An alternative way to control the splitter is to use the RootProvider component and the useSplitter hook. This way you can access the state and methods from outside the component.

Resize Indicator

Use the Splitter.ResizeTriggerIndicator component to show a visual indicator on the resize handle.

Dynamic Collapsible

Use the collapsePanel() and expandPanel() methods to programmatically control panel collapse based on viewport size. This is useful for responsive sidebar layouts that collapse on smaller screens.

Nested

Nest splitters to build grid-like layouts. Use createSplitterRegistry() to create a shared registry between splitter instances — this enables multi-drag at intersection points where horizontal and vertical splitters meet.

API

See Ark UI Splitter docs for full props and examples.

SliderSteps