Components

Collapsible

An interactive component which can be expanded or collapsed.

import { Box } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import { 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>
  )
}

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

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

Usage

import { Collapsible } from '~/components/ui/collapsible'

Installation

npx @park-ui/cli components add collapsible

1

Add Styled Primitive

Copy the code snippet below into ~/components/ui/styled/collapsible.tsx

'use client'
import type { Assign } from '@ark-ui/react'
import { Collapsible } from '@ark-ui/react/collapsible'
import { type CollapsibleVariantProps, collapsible } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'

const { withProvider, withContext } = createStyleContext(collapsible)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootProviderBaseProps>, CollapsibleVariantProps>
>(Collapsible.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  HTMLDivElement,
  Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootBaseProps>, CollapsibleVariantProps>
>(Collapsible.Root, 'root')

export const Content = withContext<
  HTMLDivElement,
  Assign<HTMLStyledProps<'div'>, Collapsible.ContentBaseProps>
>(Collapsible.Content, 'content')

export const Trigger = withContext<
  HTMLButtonElement,
  Assign<HTMLStyledProps<'button'>, Collapsible.TriggerBaseProps>
>(Collapsible.Trigger, 'trigger')

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

import { type Assign, Collapsible } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type CollapsibleVariantProps, collapsible } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'

const { withProvider, withContext } = createStyleContext(collapsible)

export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootProviderBaseProps>, CollapsibleVariantProps>
>(Collapsible.RootProvider, 'root')

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
  Assign<Assign<HTMLStyledProps<'div'>, Collapsible.RootBaseProps>, CollapsibleVariantProps>
>(Collapsible.Root, 'root')

export const Content = withContext<Assign<HTMLStyledProps<'div'>, Collapsible.ContentBaseProps>>(
  Collapsible.Content,
  'content',
)

export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Collapsible.TriggerBaseProps>>(
  Collapsible.Trigger,
  'trigger',
)

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

No snippet found

2

Add Re-Export

To improve the developer experience, re-export the styled primitives in~/components/ui/collapsible.tsx.

export * as Collapsible from './styled/collapsible'

export * as Collapsible from './styled/collapsible'

3

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:

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',
      },
    },
  },
})