Props

The Accordion component is a reusable component that allows you to create a collapsible accordion interface.

Type

• Type: string
• Default: single
• Options: single | multiple

type: Specifies the type of accordion. It can be either "single" or "multiple". If "single", only one item can be open at a time. If "multiple", multiple items can be open at the same time. By default, the type is "single".

function AccordionType() {
  return (
    <>
      <Accordion type="single">
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
            provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
            perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
            veniam recusandae.
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
            odio animi mollitia? Blanditiis
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion>
      <Accordion type="multiple">
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
            provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
            perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
            veniam recusandae.
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item>
          <AccordionButton>
            <div>
              <Text weight="medium">Nice to Meet You</Text>
              <Text size="2xs">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
                voluptatem obcaecati temporibus
              </Text>
            </div>
          </AccordionButton>
          <Accordion.Panel>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
            odio animi mollitia? Blanditiis
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion>
    </>
  )
}

Certainly! Here's the updated separation of the props into different sections and the removal of the separate prop from the corner section:

Corner Props

The size prop determines the corners of the Accordion. It accepts any of the Size types defined in your library. If not provided, it defaults to the md size.

• Type: string
• Default: md
• Options: sharp | xs | sm | md | lg | circle | full

Example Usage

function AccordionBase(props) {
  return (
    <Accordion {...props}>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}

function CornerCorners() {
  return (
    <div>
      <AccordionBase color="bg" variant="solid" corner="sharp" />
      <AccordionBase color="bg" variant="soft" corner="sm" />
      <AccordionBase color="bg" variant="outline" corner="md" />
      <AccordionBase color="bg" variant="solid" corner="lg" />
      <AccordionBase color="bg" variant="soft" corner="xl" />
      <AccordionBase color="bg" variant="outline" corner="full" />
    </div>
  )
}

Separate Props

The separate prop determines whether to separate the accordion items or not. If set to true, it separates the accordion items with a border. If not provided, it defaults to false.

• Type: boolean
• Default: false
• Options: true | false

Example Usage

Example Usage

function AccordionBase(props) {
  return (
    <Accordion {...props}>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}

function SeparateExample() {
  return (
    <div>
      <AccordionBase separate color="bg" variant="solid" corner="md" />
      <AccordionBase separate color="bg" variant="soft" corner="md" />
      <AccordionBase separate color="bg" variant="outline" corner="md" />
    </div>
  )
}

I've added a new section for the Separate props and an example usage for it. The separate prop has been removed from the corner section and is now included in the Separate section.

Collapsible

• Type: boolean
• Default: false
• Options: true | false

The "collapsible" prop specifies whether or not all accordion items can be closed. If "collapsible" is set to "true", then all accordion items can be closed even if there is no item still open. If "collapsible" is set to "false", then at least one accordion item must be open at all times.

Here's an example of how to use the "collapsible" prop:

function AccordionCollapsible() {
  return (
    <Accordion collapsible>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}

Variants

• Type: string
• Default: undefined
• Options: solid | outline | soft

The Accordion component has four variants available: solid, soft, outline, and the default variant. You can specify the variant using the variant prop.

Example usage:

function AccordionType() {
  return (
    <Accordion  variant="solid">
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
    <Accordion  variant="outline">
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
    <Accordion  variant="soft">
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}

Sizes

• Type: string
• Default: md
• Options: 2xs | xs | sm | md | lg | xl | 2xl

The Accordion component supports seven different sizes, ranging from 2xs to 2xl. You can specify the size using the size prop.

Example usage:

function AccordionBase(props){
    return(
     <Accordion {...props}>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
          provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
          perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
          veniam recusandae.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item>
        <AccordionButton>
          <div>
            <Text weight="medium">Nice to Meet You</Text>
            <Text size="2xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia, consequatur nemo sapiente libero
              voluptatem obcaecati temporibus
            </Text>
          </div>
        </AccordionButton>
        <Accordion.Panel>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
          animi mollitia? Blanditiis
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
    )
}
function AccordionSizes() {
  return (
   <AccordionBase size="2xs" />
    <AccordionBase size="xs" />
    <AccordionBase size="sm" />
    <AccordionBase size="md" />
    <AccordionBase size="lg" />
    <AccordionBase size="xl" />
    <AccordionBase size="2xl" />
  )
}

Use Case

The AccordionBase component is useful when you need to display a list of items with associated content that can be collapsed and expanded. This can be useful in a variety of contexts such as:

• FAQ pages
• Product pages with detailed descriptions
• Tutorials with multiple steps

Troubleshooting

If you encounter issues with the accordion not functioning as expected, make sure that the HTML structure and CSS classes are correct, and that the JavaScript