Using the Accordion Component

The Accordion component is a great way to organize content in an expandable/collapsible format. Here's how you can use it in your MDX content.

Basic Example

Multiple Items Example

Usage Tips

  1. Use accordions when you have a lot of related content that can be broken down into sections
  2. Keep the trigger text (headers) concise and descriptive
  3. Ensure the content within each section is relevant to its header
  4. Consider using the type="single" prop when you want only one section open at a time
  5. Use type="multiple" when users might need to compare information across sections

The accordion component is particularly useful for:

  • FAQs
  • Product specifications
  • Step-by-step guides
  • Terms and conditions
  • Navigation menus on mobile devices