Installation
npx @park-ui/cli add accordionAdd 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 | booleanWhether an accordion item can be closed after it has been expanded. |
lazyMount | false | booleanWhether to enable lazy mounting |
multiple | false | booleanWhether multiple accordion items can be expanded at the same time. |
orientation | \vertical\ | 'horizontal' | 'vertical'The orientation of the accordion items. |
unmountOnExit | false | booleanWhether to unmount on exit. |
asChild | booleanUse 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 | booleanWhether the accordion items are disabled | |
id | stringThe 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) => voidThe callback fired when the focused accordion item changes. | |
onValueChange | (details: ValueChangeDetails) => voidThe 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* | stringThe value of the accordion item. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
disabled | booleanWhether the accordion item is disabled. |