Splitter | Park UI

Installation

npx @park-ui/cli@next add splitter

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Splitter } from '@ark-ui/react/splitter'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { splitter } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(splitter)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Splitter.Root, 'root')
export const RootProvider = withProvider(Splitter.RootProvider, 'root')
export const Panel = withContext(Splitter.Panel, 'panel')
export const ResizeTrigger = withContext(Splitter.ResizeTrigger, 'resizeTrigger')

export { SplitterContext as Context } from '@ark-ui/react/splitter'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { splitterAnatomy } from '@ark-ui/react/splitter'
import { defineSlotRecipe } from '@pandacss/dev'

export const splitter = defineSlotRecipe({
  className: 'splitter',
  slots: splitterAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      gap: '2',
    },
    panel: {
      borderRadius: 'l3',
      display: 'flex',
      background: 'gray.surface.bg',
      borderWidth: '1px',
      p: '4',
    },
    resizeTrigger: {
      borderRadius: 'l3',
      transition: 'common',
      outline: '0',
      background: 'gray.a8',
      _horizontal: {
        minWidth: '1.5',
      },
      _vertical: {
        minHeight: '1.5',
      },
    },
  },
})

Usage

import { Splitter } from '@/components/ui'

<Splitter.Root>
  <Splitter.Panel />
  <Splitter.ResizeTrigger />
  <Splitter.Panel />
</Splitter.Root>

Examples

Collapsible

Set collapsible to true on a panel to make it collapsible. Use collapsedSize to control its collapsed size. This can be useful for building sidebar layouts.

Vertical

Use the orientation prop to create a vertical splitter.

Multiple

Here is an example with multiple panels.

Store

Use the useSplitter hook to control the state of the splitter programmatically.

Props

Root

Prop	Default	Type
`panels`*		`PanelData[]` The size constraints of the panels.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the splitter. Can be `horizontal` or `vertical`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultSize`		`number[]` The initial size of the panels when rendered. Use when you don't need to control the size of the panels.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string resizeTrigger: (id: string) => string label: (id: string) => string panel: (id: string \| number) => string }>` The ids of the elements in the splitter. Useful for composition.
`keyboardResizeBy`		`number` The number of pixels to resize the panel by when the keyboard is used.
`nonce`		`string` The nonce for the injected splitter cursor stylesheet.
`onCollapse`		`(details: ExpandCollapseDetails) => void` Function called when a panel is collapsed.
`onExpand`		`(details: ExpandCollapseDetails) => void` Function called when a panel is expanded.
`onResize`		`(details: ResizeDetails) => void` Function called when the splitter is resized.
`onResizeEnd`		`(details: ResizeEndDetails) => void` Function called when the splitter resize ends.
`onResizeStart`		`() => void` Function called when the splitter resize starts.
`size`		`number[]` The controlled size data of the panels

Panel

Prop	Default	Type
`id`*		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

ResizeTrigger

Prop	Default	Type
`id`*		`${string}:${string}`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean`