Accordion

A collapsible component for displaying content in a vertical stack.

What is React?

What is Solid?

What is Vue?

What is Svelte?

import { Accordion } from '@fidely-ui/react/accordion'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionBasics = () => {
  return (
    <Accordion.Root>
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item key={item} value={item}>
          <Accordion.ItemTrigger>
            What is {item}?
            <Accordion.ItemIndicator>
              <BiChevronDown />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            {item} is a JavaScript library for building user interfaces.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

Usage

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

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

Default Value

Set the defaultValue prop to specify which item should be expanded by default.

What is React?

React is a JavaScript library for building user interfaces.

What is Solid?

What is Vue?

What is Svelte?

import { Accordion } from '@fidely-ui/react/accordion'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionDefaultValue = () => {
  return (
    <Accordion.Root defaultValue={['React']}>
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item key={item} value={item}>
          <Accordion.ItemTrigger>
            What is {item}?
            <Accordion.ItemIndicator>
              <BiChevronDown />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            {item} is a JavaScript library for building user interfaces.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

Collapsible

Use the collapsible prop to allow users to close all accordion items.

What is React?

React is a JavaScript library for building user interfaces.

What is Solid?

What is Vue?

What is Svelte?

import { Accordion } from '@fidely-ui/react/accordion'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionCollapsible = () => {
  return (
    <Accordion.Root defaultValue={['React']} collapsible>
      {['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
        <Accordion.Item key={item} value={item}>
          <Accordion.ItemTrigger>
            What is {item}?
            <Accordion.ItemIndicator>
              <BiChevronDown />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            {item} is a JavaScript library for building user interfaces.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

Multiple Panels

Use the multiple prop to enable expanding multiple panels at the same time.

What is Fidely UI?

What is Chakra UI?

What is MUI?

What is Ant Design?

What is Mantime?

import { Accordion } from '@fidely-ui/react/accordion'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionMultiple = () => {
  return (
    <Accordion.Root defaultValue={['React']} multiple>
      {items.map((item) => (
        <Accordion.Item key={item.value} value={item.value}>
          <Accordion.ItemTrigger>
            What is {item.title}?
            <Accordion.ItemIndicator>
              <BiChevronDown />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
          <Accordion.ItemContent>
            {item.text} is a JavaScript library for building user interfaces.
          </Accordion.ItemContent>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  )
}

const items = [
  {
    value: 'a',
    title: 'Fidely  UI',
    text: 'Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps.',
  },
  {
    value: 'b',
    title: 'Chakra UI',
    text: 'Chakra UI is a component system for building SaaS products with speed ⚡️',
  },
  {
    value: 'c',
    title: 'MUI',
    text: "Material UI: Comprehensive React component library that implements Google's Material Design. ",
  },
  {
    value: 'd',
    title: 'Ant Design',
    text: 'An enterprise-class UI design language and React UI library',
  },
  {
    value: 'e',
    title: 'Mantime',
    text: 'A fully featured React components library',
  },
]

Size

Use the size prop to adjust the overall size of the accordion. Available sizes: sm, md, lg.

First Item

Second Item

Third Item

First Item

Second Item

Third Item

First Item

Second Item

Third Item

import { Accordion, Span, Stack, Text } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionSize = () => {
  return (
    <Stack gap="8">
      {sizes.map((size) => (
        <Stack key={size} gap="3">
          <Text fontWeight="medium">{size}</Text>

          <Accordion.Root size={size} collapsible>
            {items.map((item) => (
              <Accordion.Item key={item.value} value={item.value}>
                <Accordion.ItemTrigger>
                  <Span>{item.title}</Span>
                  <Accordion.ItemIndicator>
                    <BiChevronDown />
                  </Accordion.ItemIndicator>
                </Accordion.ItemTrigger>

                <Accordion.ItemContent>{item.text}</Accordion.ItemContent>
              </Accordion.Item>
            ))}
          </Accordion.Root>
        </Stack>
      ))}
    </Stack>
  )
}

const sizes = ['sm', 'md', 'lg'] as const

const items = [
  { value: 'a', title: 'First Item', text: 'Some value 1...' },
  { value: 'b', title: 'Second Item', text: 'Some value 2...' },
  { value: 'c', title: 'Third Item', text: 'Some value 3...' },
]

Variants

Use the variant prop to switch between different visual styles of the accordion.

subtle

First Item

Second Item

Third Item

outline

First Item

Second Item

Third Item

flush

First Item

Second Item

Third Item

import { Accordion, Span, Stack, Text } from '@fidely-ui/react'
import { BiChevronDown } from 'react-icons/bi'

export const AccordionVariant = () => {
  return (
    <Stack gap="8">
      {variants.map((variant) => (
        <Stack key={variant} gap="3">
          <Text fontWeight="medium">{variant}</Text>

          <Accordion.Root variant={variant}>
            {items.map((item) => (
              <Accordion.Item key={item.value} value={item.value}>
                <Accordion.ItemTrigger>
                  <Span as="span">{item.title}</Span>
                  <Accordion.ItemIndicator>
                    <BiChevronDown />
                  </Accordion.ItemIndicator>
                </Accordion.ItemTrigger>

                <Accordion.ItemContent>{item.text}</Accordion.ItemContent>
              </Accordion.Item>
            ))}
          </Accordion.Root>
        </Stack>
      ))}
    </Stack>
  )
}

const variants = ['subtle', 'outline', 'flush'] as const

const items = [
  { value: 'a', title: 'First Item', text: 'Some value 1...' },
  { value: 'b', title: 'Second Item', text: 'Some value 2...' },
  { value: 'c', title: 'Third Item', text: 'Some value 3...' },
]

Props

Root

Prop	Type	Default	Description
`defaultValue`	`string[]`	—	The value(s) of the item(s) to expand by default.
`value`	`string[]`	—	The controlled value of the expanded item(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Callback function triggered when the value changes.
`collapsible`	`boolean`	`false`	Allows all items to be collapsed so none are open.
`multiple`	`boolean`	`false`	Enables multiple accordion items to be open at once.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the overall size of the accordion.
`variant`	`"flush" \| "outline" \| "subtle"`	`"plain"`	Sets the visual style of the accordion.
`children`	`ReactNode`	—	The accordion items to render within the root.

Item

Prop	Type	Default	Description
`value`	`string`	—	Unique value used to identify the accordion item.
`disabled`	`boolean`	`false`	Disables interaction for this accordion item.
`children`	`ReactNode`	—	The trigger and content for the accordion item.

ItemTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	The content displayed inside the trigger button.
`disabled`	`boolean`	`false`	Disables interaction with the trigger.

ItemIndicator

Prop	Type	Default	Description
`children`	`ReactNode`	—	Typicallyi an icon or symbol indicating open/close state.

ItemContent

Prop	Type	Default	Description
`children`	`ReactNode`	—	The contentt displayed when the accordion item is expanded.