Park UI Logo
GitHub
Components
Splitter

Splitter

A component that divides your interface into resizable sections

Usage

A
B
import { Splitter } from '~/components/ui'

export const Demo = (props: Splitter.RootProps) => {
  return (
    <Splitter.Root
      size={[
        { id: 'a', size: 50 },
        { id: 'b', size: 50 },
      ]}
      {...props}
    >
      <Splitter.Panel id="a">A</Splitter.Panel>
      <Splitter.ResizeTrigger id="a:b" />
      <Splitter.Panel id="b">B</Splitter.Panel>
    </Splitter.Root>
  )
}

Installation

npx @park-ui/cli components add splitter