- Documentation

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.

Installation

bash

pnpm dlx shadcn@latest add https://auradesignsystem.com/r/accordion.json

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