Skip to main content

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.

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

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.
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.

PropsTypeDescriptionDefault
asdiv or liSet HTML tag of the Accordion. Either div Or li. Use li when you are building collapse navigation menu"div"
durationnumberSet transition duration__
defaultOpenbooleanInitial active panelfalse
childrenReactNodeNote: Use only Accordion.Header & Accordion.Body as a child component__
classNamestringAdd custom classes to the Accordion component for extra style__

Accordion.Header

PropsTypeDescriptionDefault
refuseRefUse ref prop to access DOM nodes of Accordion.Header__
childrenReactNode or ({ open }: { open: boolean }) => React.ReactNodeUse render props to animate chevron icon__
classNamestringAdd custom classes to the Accordion.Header component for extra style__

Accordion.Body

PropsTypeDescriptionDefault
refuseRefUse ref prop to access DOM nodes of Accordion.Body__
asdiv or liSet HTML tag of the Accordion. Either div Or li. Use li when you are building collapse navigation menu"div"
childrenReactNodeUse any valid ReactElement or text__
classNamestringAdd custom classes to the Accordion.Body component for extra style__