Accordion | Park UI

What is Park UI?

A beautiful component library built with Ark UI and Panda CSS.

How do I get started?

Is it free to use?

Installation

npx @park-ui/cli add accordion

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Accordion } from '@ark-ui/react/accordion'
import { ark } from '@ark-ui/react/factory'
import { ChevronDownIcon } from 'lucide-react'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { accordion } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(accordion)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Accordion.Root, 'root')
export const RootProvider = withProvider(Accordion.RootProvider, 'root')
export const Item = withContext(Accordion.Item, 'item')
export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator', {
  defaultProps: { children: <ChevronDownIcon /> },
})
export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')
export const ItemBody = withContext(ark.div, 'itemBody')

export { AccordionContext as Context } from '@ark-ui/react/accordion'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { accordionAnatomy } from '@ark-ui/react/accordion'
import { defineSlotRecipe } from '@pandacss/dev'

export const accordion = defineSlotRecipe({
  className: 'accordion',
  slots: accordionAnatomy.extendWith('itemBody').keys(),
  base: {
    root: {
      width: 'full',
      '--accordion-radius': 'radii.l2',
    },
    item: {
      overflowAnchor: 'none',
    },
    itemTrigger: {
      alignItems: 'center',
      borderRadius: 'var(--accordion-radius)',
      color: 'fg.default',
      cursor: 'pointer',
      display: 'flex',
      fontWeight: 'semibold',
      gap: '3',
      justifyContent: 'space-between',
      textAlign: 'start',
      textStyle: 'lg',
      width: 'full',
      _focusVisible: {
        outline: '2px solid',
        outlineColor: 'colorPalette.focusRing',
      },
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    itemIndicator: {
      transition: 'rotate 0.2s',
      transformOrigin: 'center',
      color: 'fg.subtle',
      _open: {
        rotate: '180deg',
      },
      _icon: {
        width: '1.2em',
        height: '1.2em',
      },
    },
    itemBody: {
      pb: 'calc(var(--accordion-padding-y) * 2)',
      color: 'fg.muted',
    },
    itemContent: {
      overflow: 'hidden',
      borderRadius: 'var(--accordion-radius)',
      _open: {
        animationName: 'expand-height, fade-in',
        animationDuration: 'normal',
      },
      _closed: {
        animationName: 'collapse-height, fade-out',
        animationDuration: 'normal',
      },
    },
  },
  defaultVariants: {
    size: 'md',
    variant: 'outline',
  },
  variants: {
    variant: {
      outline: {
        item: {
          borderBottomWidth: '1px',
        },
      },
      plain: {},
    },
    size: {
      md: {
        root: {
          '--accordion-padding-x': 'spacing.4',
          '--accordion-padding-y': 'spacing.2.5',
        },
        itemTrigger: {
          textStyle: 'md',
          py: 'var(--accordion-padding-y)',
        },
      },
    },
  },
})

Usage

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

<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>

Props

Root

Prop	Default	Type
`variant`	`'outline'`	`'outline' \| 'plain'`
`size`	`'md'`	`'md'`
`collapsible`	`false`	`boolean` Whether an accordion item can be closed after it has been expanded.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`multiple`	`false`	`boolean` Whether multiple accordion items can be expanded at the same time.
`orientation`	`\vertical\`	`'horizontal' \| 'vertical'` The orientation of the accordion items.
`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.
`defaultValue`		`string[]` The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
`disabled`		`boolean` Whether the accordion items are disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string item: (value: string) => string itemContent: (value: string) => string itemTrigger: (value: string) => string }>` The ids of the elements in the accordion. Useful for composition.
`onFocusChange`		`(details: FocusChangeDetails) => void` The callback fired when the focused accordion item changes.
`onValueChange`		`(details: ValueChangeDetails) => void` The callback fired when the state of expanded/collapsed accordion items changes.
`value`		`string[]` The controlled value of the expanded accordion items.

Item

Prop	Default	Type
`value`*		`string` The value of the accordion item.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Whether the accordion item is disabled.