- Getting Started
- Components

Accordion

The Accordion component allows users to expand and collapse content sections, making it ideal for organizing information in a compact and user-friendly way.

Docs

API reference

Yes. It adheres to the WAI-ARIA design pattern.

Adding Animation to Global CSS

To enhance the user experience, you can add smooth animations to the Accordion component by defining transition styles in your global CSS file.

css

/* globals.css */

@theme {
...
  --animate-accordion-open: slideDownAccordion 250ms ease-in-out;
  --animate-accordion-closed: slideUpAccordion 250ms ease-in-out;

  @keyframes slideDownAccordion {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  
  @keyframes slideUpAccordion {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
...
}

Usage as a Component

To simplify usage, you can create a reusable Accordion component that accepts an array of items with title and content.

jsx

import { ReactNode } from "react";
import { Accordion as AccordionRadix } from "radix-ui";
import { ChevronDownIcon } from "@radix-ui/react-icons";

type AccordionItem = {
  title: ReactNode;
  content: ReactNode;
};

type AccordionProps = {
  items: AccordionItem[];
};

const Accordion = ({ items, ...props }: AccordionProps) => {
  return (
    <AccordionRadix.Root collapsible type="single" {...props}>
      {items.map((item, index) => (
        <AccordionRadix.Item
          className="overflow-hidden"
          value={`item-${index}`}
          key={`item-${index}`}
        >
          <AccordionRadix.Trigger className="group flex justify-between flex-1 cursor-pointer items-center gap-1 p-1 w-full h6 hover:bg-black3 border border-b-1 border-black-3 border-x-0 border-t-0 px-2">
            {item.title}
            <ChevronDownIcon
              aria-hidden
              className="group-data-[state=open]:rotate-180 transition duration-300"
            />
          </AccordionRadix.Trigger>
          <AccordionRadix.Content className="bg-black-2 data-[state=open]:animate-accordion-open data-[state=closed]:animate-accordion-closed">
            <div className="px-2 py-1">{item.content}</div>
          </AccordionRadix.Content>
        </AccordionRadix.Item>
      ))}
    </AccordionRadix.Root>
  );
};

export default Accordion;

Usage Example

jsx

import Accordion from "@/components/ui/accordion"

const accordionItems = [
  { title: "What is Radix UI?", content: "Radix UI provides accessible components for React." },
  { title: "Can I customize it?", content: "Yes! Radix UI components are unstyled and flexible." },
];

export default function Home() {
  return <Accordion items={accordionItems} />;
}