Make it yours

Copy and paste the following code into your panda.config.ts and update if needed.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'neutral',
      grayColor: 'neutral',
      borderRadius: 'sm',
    }),
  ],
  include: ['./src/**/*.{js,jsx,ts,tsx,astro,vue}'],
  jsxFramework: '__JS_FRAMEWORK__',
  outdir: 'styled-system',
})

Components

Collapsible

An interactive component which can be expanded or collapsed.

Docs

API Reference

Usage

Content

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

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

npx @park-ui/cli components add collapsible

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/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 '~/lib/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 '~/lib/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

Extend ~/components/ui/primitives/index.ts with the following line:

export * as Collapsible from './collapsible'

2

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