Accordion

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

import { Accordion } from "rizzui";

Simple Accordion

A simple style of Accordion.

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.

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.

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.

import { Collapse } 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>
    ))}
    </>
  );
}

With Custom Style

You can change the style of the Accordion.

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.

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.

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.

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>
  );
}

API Reference

---

Accordion Props

Here is the API documentation of the Accordion component.

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	__

Accordion.Header

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	__

Accordion.Body

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	__