A vertically stacked set of interactive headings that each reveal a section of content.
npx ever-ui-clx@0.2.1 add demo-accordion
tailwind.config.ts
Modify your tailwind.config.ts as follows:
// tailwind.config.ts module.exports = { theme: { extend: { keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, };
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>