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

SourceBuilt with Ariakit
OverviewProps
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

Open at start

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

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
LinkAvatar