Basic

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8export function Accordion01() {
9  return (
10    <Accordion defaultValue={['item-1']} className="w-full max-w-md">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>Is it accessible?</AccordionTrigger>
13        <AccordionContent>
14          Yes. It adheres to the WAI-ARIA design pattern and is fully keyboard
15          navigable.
16        </AccordionContent>
17      </AccordionItem>
18      <AccordionItem value="item-2">
19        <AccordionTrigger>Is it styled?</AccordionTrigger>
20        <AccordionContent>
21          Yes. It comes with default styles that match the rest of the
22          components.
23        </AccordionContent>
24      </AccordionItem>
25      <AccordionItem value="item-3">
26        <AccordionTrigger>Is it animated?</AccordionTrigger>
27        <AccordionContent>
28          Yes. It is animated by default, but you can disable it if you prefer.
29        </AccordionContent>
30      </AccordionItem>
31    </Accordion>
32  )
33}