Accordion

<Accordion>
  <AccordionItem title="Item 1">

    This is the first item's accordion body.

    You can use **markdown** here too!

    Make sure to include an empty line after the component if you want to use markdown.

  </AccordionItem>
  <AccordionItem title="Item 2">

    This is the second item's accordion body with <b>bold text</b>.

  </AccordionItem>
  <AccordionItem title="Item 3">

    This is the third item's accordion body.

  </AccordionItem>
</Accordion>

Examples

Single Accordion

<Accordion single>
  <AccordionItem title="Item 1">
    <p>Content 1</p>
  </AccordionItem>
  <AccordionItem title="Item 2">
    <p>Content 2</p>
  </AccordionItem>
  <AccordionItem title="Item 3">
    <p>Content 3</p>
  </AccordionItem>
</Accordion>

Overriding Styles

Use the class options to override the styles on the accordion.

<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
  <AccordionItem title="Item 1" class="border-none">
    <p>Content 1</p>
  </AccordionItem>
  <AccordionItem title="Item 2" class="border-none">
    <p>Content 2</p>
  </AccordionItem>
  <AccordionItem title="Item 3" class="border-none">
    <p>Content 3</p>
  </AccordionItem>
</Accordion>

Title Slot

Pass components into the accordion title by using the slot title.

<Accordion>
  <AccordionItem title="Item 1">
    <span slot='title'>Custom Title <Value data={growth} fmt=pct1 /></span>
    Content 1 
  </AccordionItem>
  <AccordionItem title="Item 2">
    <p>Content 2</p>
  </AccordionItem>
  <AccordionItem title="Item 3">
    <p>Content 3</p>
  </AccordionItem>
</Accordion>

Options

Accordion

single

When true, only a single accordian item can be open at once.

Options:

class

Pass custom classes to control the styling of the accordion body. Supports tailwind classes.

AccordionItem

title

Required

The title of the accordion item. This will be displayed as the header.

class

Pass custom classes to control the styling of an accordion item. Supports tailwind classes.