GitHub

Splitter

A splitter is a component that splits content into two or more panels.

Docs API
Panel 1
Panel 2
Panel 3

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/splitter.json

Usage

import { 
  Splitter, 
  SplitterPanel, 
  SplitterResizeTrigger 
} from "@/components/ui/splitter";
<Splitter>
  <SplitterPanel id="1">Panel 1</SplitterPanel>
  <SplitterResizeTrigger id="1:2" withHandle />
  <SplitterPanel id="2">Panel 2</SplitterPanel>
</Splitter>