Accordion

The Accordion and AccordionItem components provide a clean, accessible way to show and hide content within collapsible sections—ideal for FAQs, settings, or documentation toggles.

Component Breakdown

<Accordion />

This is a simple wrapper used to group multiple accordion items together. It applies optional spacing or layout styles via className.

Props

Prop	Type	Description
className	string	Optional utility classes to style the container

<Accordion className="space-y-2">
  <!-- AccordionItem components go here -->
</Accordion>

---

<AccordionItem />

Each AccordionItem uses a native <details> and <summary> tag for built-in accessibility and keyboard navigation.

Props

Prop	Type	Description
id	string	Unique ID for the element
title	string	Visible clickable heading

Features:

• Animated Chevron rotation on open/close
• Custom styling support via Tailwind
• Uses slot to render any rich content inside

<AccordionItem id="example" title="What is this?">
  This is the content shown when the accordion is expanded.
</AccordionItem>

---

Usage Example

Here’s how you might use them together in a real FAQ page or settings panel:

<Accordion className="space-y-2">
  <AccordionItem id="docs-purpose" title="What is this documentation for?">
    This documentation helps users understand how to use the platform’s features and components.
  </AccordionItem>

  <AccordionItem id="customization" title="Can I customize the components?">
    Yes, you can override styles using Tailwind utilities or extend them in your own wrapper components.
  </AccordionItem>

  <AccordionItem id="feedback" title="How do I provide feedback?">
    Each page has a feedback button at the bottom. We review all suggestions and prioritize fixes based on user needs.
  </AccordionItem>
</Accordion>

---

Example

Accessibility Notes

• The details/summary elements are natively keyboard accessible.
• The rotating chevron icon visually indicates the open/closed state.
• Works without JavaScript, making it ideal for content-focused sites.

---

Styling Tips

You can override spacing, borders, or typography using Tailwind via the className prop on <Accordion />.

For example:

<Accordion className="divide-y divide-base-300 dark:divide-base-700">
  ...
</Accordion>

Or customize padding and colors inside the slot content by styling inner elements directly.