Components
Collapsible

Collapsible

An interactive component which can be expanded or collapsed.

Usage

Content
import { Box } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import * as Collapsible from '~/components/ui/collapsible'

export const Demo = (props: Collapsible.RootProps) => {
  return (
    <Collapsible.Root defaultOpen {...props}>
      <Collapsible.Trigger asChild>
        <Button variant="outline">Toggle</Button>
      </Collapsible.Trigger>
      <Collapsible.Content>
        <Box bg="accent.default" color="accent.fg" p="4" borderRadius="l3" mt="3">
          Content
        </Box>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}

Installation

1

Add Component

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

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

const { withProvider, withContext } = createStyleContext(collapsible)

export const Root = withProvider(styled(Collapsible.Root), 'root')
export const Content = withContext(styled(Collapsible.Content), 'content')
export const Trigger = withContext(styled(Collapsible.Trigger), 'trigger')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
2

Add Recipe

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

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

export const collapsible = defineSlotRecipe({
  className: 'collapsible',
  slots: collapsibleAnatomy.keys(),
  base: {
    root: {
      alignItems: 'flex-start',
      display: 'flex',
      flexDirection: 'column',
      width: 'full',
    },
    content: {
      overflow: 'hidden',
      width: 'full',
      _open: {
        animation: 'collapse-in',
      },
      _closed: {
        animation: 'collapse-out',
      },
    },
  },
})

On this page