Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Installation
npx shadcn@latest add https://scrollx-ui.vercel.app/registry/accordion.json Update tailwind.config.ts
/** @type {import('tailwindcss').Config} */
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" },
},
"shake-smooth": {
'0%': { transform: 'translateX(0)' },
'10%': { transform: 'translateX(-12px)' },
'20%': { transform: 'translateX(12px)' },
'30%': { transform: 'translateX(-10px)' },
'40%': { transform: 'translateX(10px)' },
'50%': { transform: 'translateX(-6px)' },
'60%': { transform: 'translateX(6px)' },
'70%': { transform: 'translateX(-3px)' },
'80%': { transform: 'translateX(3px)' },
'90%': { transform: 'translateX(-1px)' },
'100%': { transform: 'translateX(0)' },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"shake-smooth": "shake-smooth 0.5s ease-in-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>API Reference
Accordion
Accordion is the root component.