Park UI Logo
GitHub
Components
Splitter

Splitter

A component that divides your interface into resizable sections

import { Splitter } from '~/components/ui/splitter'

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

Usage

import { Splitter } from '~/components/ui/splitter'

Installation

npx @park-ui/cli components add splitter