WUI logo

Accordion

The Accordion component is a list of expandable items that allow users to reveal or hide content by clicking on headers. It helps keep interfaces clean and organized by displaying information in collapsible sections.

Source@welcome-ui/accordionBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { Accordion, useAccordion } from '@welcome-ui/accordion'


const Example = () => {
  const accordion = useAccordion()


  return (
    <Accordion store={accordion} title="Accordion title">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.
    </Accordion>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/accordion
2

Import component:

import { Accordion, useAccordion } from '@welcome-ui/accordion'

Examples

Avatar

Open at start

Add defaultOpen options to useAccordion to open the accordion at the start.

With a custom icon

Customize the icon with a node element on the icon property. Note that the custom icon's size property will be set to small.

useAccordion

We use useDisclosureStore from Ariakit Disclosure for the state of the accordion, with the animated flag set to true by default.

Pass options to useAccordion:

  • defaultOpen: const accordion = useAccordion({ defaultOpen: true })

The hook returns (among other things):

  • useState('open'): whether the accordion is currently open
  • hide: a function to hide the accordion
Avatar