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 Built with Ariakit

Github

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

Examples

Avatar

Github

Open at start

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

Github

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

Link Avatar