Accordion

The <Accordion /> component is a collection of grouped panels that show content when clicked.

Uses the Reach UI Accordion component to cover accessibility requirements.

import {
  Accordion,
  AccordionButton,
  AccordionItem,
  AccordionPanel,
} from 'minerva-ui'

Preview

Source

() => {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionButton>What does this library do?</AccordionButton>
        <AccordionPanel>
          Minerva UI is an accessible, composable React component library.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionButton>What is it built with?</AccordionButton>
        <AccordionPanel>
          Minerva UI is built with Typescript, Styled System and uses Reach UI
          for accessibility
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

() => {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionButton>What does this library do?</AccordionButton>
        <AccordionPanel>
          Minerva UI is an accessible, composable React component library.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem>
        <AccordionButton>What is it built with?</AccordionButton>
        <AccordionPanel>
          Minerva UI is built with Typescript, Styled System and uses Reach UI
          for accessibility
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}