accordion-reduce-motion-demo

1import {
2  Accordion,
3  AccordionPanel,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/registry/pure-ui/ui/accordion";
7
8export function AccordionReduceMotionDemo() {
9  return (
10    <Accordion className="w-full max-w-xl" reduceMotion>
11      <AccordionItem value="item-1">
12        <AccordionTrigger>What is Base UI?</AccordionTrigger>
13        <AccordionPanel className="flex flex-col gap-4 text-balance">
14          <p className="text-[15px] text-muted-foreground">
15            Base UI is a library of high-quality unstyled React components for
16            design systems and web apps.
17          </p>
18        </AccordionPanel>
19      </AccordionItem>
20      <AccordionItem value="item-2">
21        <AccordionTrigger>How do I get started?</AccordionTrigger>
22        <AccordionPanel className="flex flex-col gap-4 text-balance">
23          <p className="text-[15px] text-muted-foreground">
24            Head to the “Quick start” guide in the docs. If you’ve used unstyled
25            libraries before, you’ll feel at home.
26          </p>
27        </AccordionPanel>
28      </AccordionItem>
29      <AccordionItem value="item-3">
30        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>
31        <AccordionPanel className="flex flex-col gap-4 text-balance">
32          <p className="text-[15px] text-muted-foreground">
33            Of course! Base UI is free and open source.
34          </p>
35        </AccordionPanel>
36      </AccordionItem>
37    </Accordion>
38  );
39}