Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

dropdown
config
Description of the SVG image Loading...

Installation

Run the following command:

npx ever-ui-clx@0.2.1 add demo-accordion

Update tailwind.config.ts

Modify your tailwind.config.ts as follows:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordionDown": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordionUp": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordionDown": "accordionDown 0.2s ease-out",
        "accordionUp": "accordionUp 0.2s ease-out",
      },
    },
  },
};

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>
IconAccordion ExtendedBreadcrumbIcon