Collapsible | Park UI

Installation

npx @park-ui/cli@next add collapsible

Add Component

Copy the code snippet below into you components folder.

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

const { withProvider, withContext } = createStyleContext(collapsible)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Collapsible.Root, 'root')
export const RootProvider = withProvider(Collapsible.RootProvider, 'root')
export const Content = withContext(Collapsible.Content, 'content')
export const Indicator = withContext(Collapsible.Indicator, 'indicator')
export const Trigger = withContext(Collapsible.Trigger, 'trigger')

export { CollapsibleContext as Context } from '@ark-ui/react/collapsible'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { collapsibleAnatomy } from '@ark-ui/react/collapsible'
import { defineSlotRecipe } from '@pandacss/dev'

export const collapsible = defineSlotRecipe({
  className: 'collapsible',
  slots: collapsibleAnatomy.keys(),
  base: {
    content: {
      overflow: 'hidden',
      _open: {
        animationName: 'expand-height, fade-in',
        animationDuration: 'slow',
      },
      _closed: {
        animationName: 'collapse-height, fade-out',
        animationDuration: 'normal',
      },
    },
  },
})

Usage

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

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content to show/hide</Collapsible.Content>
</Collapsible.Root>

Examples

Lazy Mount

Use the lazyMount prop to mount the content only when the collapsible is open.

Unmount on Exit

Use the unmountOnExit prop to unmount the content when the collapsible is closed.

Props

Root

Prop	Default	Type
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`collapsedHeight`		`string \| number` The height of the content when collapsed.
`collapsedWidth`		`string \| number` The width of the content when collapsed.
`defaultOpen`		`boolean` The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`disabled`		`boolean` Whether the collapsible is disabled.
`ids`		`Partial<{ root: string; content: string; trigger: string }>` The ids of the elements in the collapsible. Useful for composition.
`onExitComplete`		`VoidFunction` The callback invoked when the exit animation completes.
`onOpenChange`		`(details: OpenChangeDetails) => void` The callback invoked when the open state changes.
`open`		`boolean` The controlled open state of the collapsible.