Components
Splitter

Splitter

A component that divides your interface into resizable sections

Usage

A
B
import * as Splitter from '~/components/ui/splitter'

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

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { Splitter } from '@ark-ui/react/splitter'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { splitter } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(splitter)

export const Root = withProvider(styled(Splitter.Root), 'root')
export const Panel = withContext(styled(Splitter.Panel), 'panel')
export const ResizeTrigger = withContext(styled(Splitter.ResizeTrigger), 'resizeTrigger')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface PanelProps extends ComponentProps<typeof Panel> {}
export interface ResizeTriggerProps extends ComponentProps<typeof ResizeTrigger> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

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

export const splitter = defineSlotRecipe({
  className: 'splitter',
  slots: splitterAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      gap: '2',
    },
    panel: {
      borderWidth: '1px',
      background: 'bg.default',
      borderRadius: 'l2',
      color: 'fg.muted',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    resizeTrigger: {
      borderRadius: 'full',
      transitionDuration: 'normal',
      transitionProperty: 'background',
      transitionTimingFunction: 'default',
      outline: '0',
      background: 'gray.7',
      _hover: {
        background: 'gray.8',
      },
      _active: {
        background: 'gray.8',
      },
      _horizontal: {
        minWidth: '1.5',
        margin: 'min(1rem, 20%) 0',
      },
      _vertical: {
        minHeight: '1.5',
        margin: '0 min(1rem, 20%)',
      },
    },
  },
})

Previous

Slider

On this page