Accordion

Simplified API for the Accordion component, allowing you to define elements and their content in one go.

Base example


  <Accordion
    type="single"
    items={[
      {
        value: "item-1",
        trigger: "What is Accordion ?",
        content: <p>Accordion is a component that simplifies the use of accordions by allowing you to define elements and their content in one go.</p>
      },
      {
        value: "item-2",
        trigger: "How to use it ?",
        content: <p>Just pass an array of objects with the properties value, trigger and content.</p>
      },
      {
        value: "item-3",
        trigger: "What are the advantages ?",
        content: <p>Less code to write, easier to maintain, and a more intuitive API.</p>
      }
    ]}
  />

Variants

Variant: default


<Accordion
  type="single" 
  variant="default"
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (variant default)",
      content: <p>Content with variant default</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (variant default)",
      content: <p>Content with variant default</p>
    }
  ]}
/>

Variant: bordered


<Accordion
  type="single" 
  variant="bordered"
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (variant bordered)",
      content: <p>Content with variant bordered</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (variant bordered)",
      content: <p>Content with variant bordered</p>
    }
  ]}
/>

Variant: card


<Accordion
  type="single" 
  variant="card"
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (variant card)",
      content: <p>Content with variant card</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (variant card)",
      content: <p>Content with variant card</p>
    }
  ]}
/>

Content styles

Content Style: default

<Accordion
  contentStyle="default"
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (content default)",
      content: <p>Content with style default</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (content default)",
      content: <p>Content with style default</p>
    }
  ]}
/>

Content Style: filled

<Accordion
  contentStyle="filled"
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (content filled)",
      content: <p>Content with style filled</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (content filled)",
      content: <p>Content with style filled</p>
    }
  ]}
/>

Multiple

Type: multiple - Allows opening multiple elements at the same time

Content of element 1

Content of element 3


<Accordion
  type="multiple"
  defaultValue={["item-1", "item-3"]}
  items={[
    {
      value: "item-1",
      trigger: "Element 1 (default open)",
      content: <p>Content of element 1</p>
    },
    {
      value: "item-2",
      trigger: "Element 2",
      content: <p>Content of element 2</p>
    },
    {
      value: "item-3",
      trigger: "Element 3 (default open)",
      content: <p>Content of element 3</p>
    }
  ]}
/>

Disabled element


<Accordion
  type="single"
  items={[
    {
      value: "item-1",
      trigger: "Element 1",
      content: <p>Content of element 1</p>
    },
    {
      value: "item-2",
      trigger: "Element 2 (disabled)",
      content: <p>Content of element 2</p>,
      disabled: true
    },
    {
      value: "item-3",
      trigger: "Element 3",
      content: <p>Content of element 3</p>
    }
  ]}
/>

Complete example

Main features

Simple API for more intuitive use
Full customization of styles and behaviors
Support for controlled and uncontrolled modes

Common use cases

FAQ (Frequently Asked Questions)
Mobile navigation menus
Reducible content sections
Configuration panels

<Accordion
  itemVariant="card"
  triggerVariant="filled"
  triggerSize="lg"
  contentVariant="filled"
  type="multiple"
  defaultValue={["item-1", "item-3"]}
  items={[
    {
      value: "item-1",
      trigger: "Main features",
      content: (
        <div className="space-y-2">
          <h3 className="text-lg font-medium">Main features</h3>
          <ul className="list-disc pl-5 space-y-1">
            <li>Simple API for more intuitive use</li>
            <li>Full customization of styles and behaviors</li>
            <li>Support for controlled and uncontrolled modes</li>
          </ul>
        </div>
      )
    },
    {
      value: "item-2",
      trigger: "Customization options",
      content: (
        <div className="space-y-2">
          <h3 className="text-lg font-medium">Customization options</h3>
          <p>Customize the appearance and behavior of the accordion with many options.</p>
          <ul className="list-disc pl-5 space-y-1">
            <li>Variants: default, bordered, card</li>
            <li>Trigger styles: default, filled, underlined, ghost</li>
            <li>Content styles: default, indented, separated</li>
          </ul>
        </div>
      )
    },
    {
      value: "item-3",
      trigger: "Usage examples",
      content: (
        <div className="space-y-2">
          <h3 className="text-lg font-medium">Common use cases</h3>
          <ul className="list-disc pl-5 space-y-1">
            <li>FAQ (Frequently Asked Questions)</li>
            <li>Mobile navigation menus</li>
            <li>Reducible content sections</li>
            <li>Configuration panels</li>
          </ul>
        </div>
      )
    }
  ]}
/>

API Reference

Props	Type	Default	Description
type	"single" \| "multiple"	-	Type of accordion (only one element open or multiple elements open)
items	AccordionItem[]	-	Array of objects defining the items and their content
defaultValue?	string \| string[]	-	Default value(s) of the open element
value?	string \| string[]	-	Value(s) of the open element (controlled mode)
onValueChange?	(value: string \| string[]) => void	-	Function called when the element changes
collapsible?	boolean	true	If the open element can be closed for (type=single)
itemVariant?	"default" \| "bordered" \| "card"	"default"	Variants of the accordion
triggerVariant?	"default", "filled", "underlined"	"default"	Variants of the trigger
contentVariant?	"default" \| "filled"	"default"	Variants of the content

AccordionItem

Props	Type	Default	Description
value	string	-	Unique identifier of the item
trigger	React.ReactNode	-	Content displayed as the item header
content	React.ReactNode	-	Content displayed when the item is expanded
disabled?	boolean	false	Disables opening/interaction for this item