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

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

jsx

import React from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/Accordion";

type AccordionListProps = {
  items: {
    title: React.ReactNode;
    content: React.ReactNode;
    itemProps?: React.ComponentProps<typeof AccordionItem>;
  }[];
} & React.ComponentProps<typeof Accordion>;

const AccordionList = ({ items, ...props }: AccordionListProps) => {
  return (
    <Accordion {...props}>
      {items.map((item, index) => (
        <AccordionItem
          className="overflow-hidden"
          value={`item-${index}`}
          key={`item-${index}`}
        >
          <AccordionTrigger>{item.title}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
};

export default AccordionList;

Usage Example

jsx

import AccordionList from "@/components/AccordionList"

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

Installation

bash

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