Accordion | Zalify UI

What is Zalify UI?

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

How do I get started?

Is it free to use?

React

Usage

import { Accordion } from '@zalify-ui/react'

<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.