react_jamsrui_accordion_collapsible_quickstart_example.ts

1import React from "react";
2import {
3  Accordion,
4  AccordionItem,
5  AccordionTrigger,
6  AccordionContent,
7} from "@jamsrui/accordion";
8
9const AccordionExample = () => {
10  return (
11    <Accordion type="single" collapsible>
12      <AccordionItem value="item-1">
13        <AccordionTrigger>Is it accessible?</AccordionTrigger>
14        <AccordionContent>
15          Yes. It adheres to the WAI-ARIA design pattern.
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 matches the other components'
22          aesthetic.
23        </AccordionContent>
24      </AccordionItem>
25      <AccordionItem value="item-3">
26        <AccordionTrigger>Is it animated?</AccordionTrigger>
27        <AccordionContent>
28          Yes. It's animated by default, but you can disable it if you prefer.
29        </AccordionContent>
30      </AccordionItem>
31    </Accordion>
32  );
33};
34
35export default AccordionExample;