---
sidebar_position: 1
---

import { Accordion, cn, Avatar } from "rizzui";
import Paper from "@site/src/components/paper";
import { ChevronDownIcon } from "@heroicons/react/24/solid";
import {
  defaultCollapseData,
  customStyleCollapseData,
} from "@site/src/data/collapse-data";

# Accordion

A content area which can be collapsed and expanded. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

```tsx
"use client"; 

import { Accordion } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Simple Accordion

A simple style of **Accordion**.

<Paper className="block">
  <div>
    {defaultCollapseData.map((item) => (
      <Accordion
        key={item.title}
        className="mx-8 border-b last-of-type:border-b-0"
      >
        <Accordion.Header>
          {({ open }) => (
            <div className="flex w-full cursor-pointer items-center justify-between py-5 text-xl font-semibold">
              {item.title}
              <ChevronDownIcon
                className={cn(
                  "h-5 w-5 -rotate-90 transform transition-transform duration-300",
                  open && "-rotate-0"
                )}
              />
            </div>
          )}
        </Accordion.Header>
        <Accordion.Body className="mb-7">{item.content}</Accordion.Body>
      </Accordion>
    ))}
  </div>
</Paper>

```tsx
"use client"; 

import { Accordion } from "rizzui";
import { ChevronDownIcon } from "@heroicons/react/24/solid";

const data = [
  {
    title: "Option A",
    content: `
      If you are unhappy with your purchase for any reason, email us within 90
      days and we will refund you in full, no questions asked. If you are
      unhappy with your purchase for any reason, email us within 90 days and
      we will refund you in full, no questions asked.If you are unhappy with
      your purchase for any reason.
    `,
  },
  ...
];

export default function App() {
  return (
    <>
    {data.map((item) => (
      <Accordion
        key={item.title}
        className="mx-8 border-b last-of-type:border-b-0"
      >
        <Accordion.Header>
          {({ open }) => (
            <div className="flex w-full cursor-pointer items-center justify-between py-5 text-xl font-semibold">
              {item.title}
              <ChevronDownIcon
                className={cn(
                  "h-5 w-5 -rotate-90 transform transition-transform duration-300",
                  open && "-rotate-0"
                )}
              />
            </div>
          )}
        </Accordion.Header>
        <Accordion.Body className="mb-7">{item.content}</Accordion.Body>
      </Accordion>
    ))}
    </>
  );
}
```

<div className="mb-16" />

## With Custom Style

You can change the style of the **Accordion**.

<Paper className="block">
  <div className="rounded-3xl border">
    {customStyleCollapseData.map((item) => (
      <Accordion
        key={item.title}
        defaultOpen={item.defaultOpen}
        className="mx-8 my-2 border-b last-of-type:border-b-0"
      >
        <Accordion.Header>
          {({ open }) => (
            <div className="flex w-full cursor-pointer items-center justify-between py-5 text-left rtl:text-right">
              <div className="flex items-center gap-4">
                {item.avatar}
                <div className="grid gap-1">
                  <h3 className="text-xl font-semibold">{item.title}</h3>
                  <p className="text-sm font-light text-gray-500">
                    6 unread messages
                  </p>
                </div>
              </div>
              <div
                className={cn(
                  "h-5 w-5 transform transition-transform duration-300",
                  open && "-rotate-90"
                )}
              >
                {item.icon}
              </div>
            </div>
          )}
        </Accordion.Header>
        <Accordion.Body className="mb-7">{item.content}</Accordion.Body>
      </Accordion>
    ))}
  </div>
</Paper>

```tsx
"use client"; 

import { Accordion, Avatar } from "rizzui";
import { SunIcon } from "@heroicons/react/20/solid";
import { MoonIcon, LinkIcon } from "@heroicons/react/24/outline";

const data = [
  {
    title: "Option A",
    icon: <LinkIcon />,
    avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
    defaultOpen: true,
    content: `
      If you are unhappy with your purchase for any reason, email us within 90
      days and we will refund you in full, no questions asked. If you are
      unhappy with your purchase for any reason, email us within 90 days and
      we will refund you in full, no questions asked.If you are unhappy with
      your purchase for any reason.
    `,
  },
  ...
];

export default function App() {
  return (
    <div className="rounded-3xl border">
      {data.map((item) => (
        <Accordion
          key={item.title}
          defaultOpen={item.defaultOpen}
          className="mx-8 my-2 border-b last-of-type:border-b-0"
        >
          <Accordion.Header>
            {({ open }) => (
              <div className="flex w-full cursor-pointer items-center justify-between py-5 text-left rtl:text-right">
                <div className="flex items-center gap-4">
                  {item.avatar}
                  <div className="grid gap-1">
                    <h3 className="text-xl font-semibold">{item.title}</h3>
                    <p className="text-sm font-light text-gray-500">
                      6 unread messages
                    </p>
                  </div>
                </div>
                <div
                  className={cn(
                    "h-5 w-5 transform transition-transform duration-300",
                    open && "-rotate-90"
                  )}
                >
                  {item.icon}
                </div>
              </div>
            )}
          </Accordion.Header>
          <Accordion.Body className="mb-7">{item.content}</Accordion.Body>
        </Accordion>
      ))}
    </div>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Accordion Props

Here is the API documentation of the Accordion component.

<div className="overflow-x-auto">

|    Props    |     Type      |                                                 Description                                                  | Default |
| :---------: | :-----------: | :----------------------------------------------------------------------------------------------------------: | :-----: |
|     as      | `div` or `li` | Set HTML tag of the Accordion. Either `div` Or `li`. Use `li` when you are building collapse navigation menu | `"div"` |
|  duration   |   `number`    |                                           Set transition duration                                            |  \_\_   |
| defaultOpen |   `boolean`   |                                             Initial active panel                                             | `false` |
|  children   |  `ReactNode`  |                    Note: Use only Accordion.Header & Accordion.Body as a child component                     |  \_\_   |
|  className  |   `string`    |                        Add custom classes to the Accordion component for extra style                         |  \_\_   |

</div>

<div className="mb-10" />

### Accordion.Header

<div className="overflow-x-auto">

|   Props   |                               Type                                |                             Description                              | Default |
| :-------: | :---------------------------------------------------------------: | :------------------------------------------------------------------: | :-----: |
|    ref    |                             `useRef`                              |         Use ref prop to access DOM nodes of Accordion.Header         |  \_\_   |
| children  | `ReactNode` or `({ open }: { open: boolean }) => React.ReactNode` |               Use render props to animate chevron icon               |  \_\_   |
| className |                             `string`                              | Add custom classes to the Accordion.Header component for extra style |  \_\_   |

</div>

<div className="mb-10" />

### Accordion.Body

<div className="overflow-x-auto">

|   Props   |     Type      |                                                 Description                                                  | Default |
| :-------: | :-----------: | :----------------------------------------------------------------------------------------------------------: | :-----: |
|    ref    |   `useRef`    |                              Use ref prop to access DOM nodes of Accordion.Body                              |  \_\_   |
|    as     | `div` or `li` | Set HTML tag of the Accordion. Either `div` Or `li`. Use `li` when you are building collapse navigation menu | `"div"` |
| children  |  `ReactNode`  |                                      Use any valid ReactElement or text                                      |  \_\_   |
| className |   `string`    |                      Add custom classes to the Accordion.Body component for extra style                      |  \_\_   |

</div>
