accordion-custom-indicator-demo

1import { Plus, ChevronDown, ChevronsDown } from "lucide-react";
2
3import {
4  Accordion,
5  AccordionPanel,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/registry/pure-ui/ui/accordion";
9import { cn } from "@/lib/classes";
10
11export function AccordionCustomIndicatorDemo() {
12  return (
13    <Accordion className="w-full max-w-xl">
14      <AccordionItem value="item-1">
15        <AccordionTrigger
16          icon={({ open }) => (
17            <Plus
18              className={cn(
19                "size-4 transition-transform duration-300 ease",
20                open ? "rotate-45" : "rotate-0"
21              )}
22            />
23          )}
24        >
25          What is Base UI?
26        </AccordionTrigger>
27        <AccordionPanel className="flex flex-col gap-4 text-balance">
28          <p className="text-[15px] text-muted-foreground">
29            Base UI is a library of high-quality unstyled React components for
30            design systems and web apps.
31          </p>
32        </AccordionPanel>
33      </AccordionItem>
34      <AccordionItem value="item-2">
35        <AccordionTrigger
36          icon={({ open }) => (
37            <ChevronDown
38              className={cn(
39                "size-4 transition-transform duration-300 ease",
40                open ? "rotate-180" : "rotate-0"
41              )}
42            />
43          )}
44        >
45          How do I get started?
46        </AccordionTrigger>
47        <AccordionPanel className="flex flex-col gap-4 text-balance">
48          <p className="text-[15px] text-muted-foreground">
49            Head to the “Quick start” guide in the docs. If you’ve used unstyled
50            libraries before, you’ll feel at home.
51          </p>
52        </AccordionPanel>
53      </AccordionItem>
54      <AccordionItem value="item-3">
55        <AccordionTrigger
56          icon={({ open }) => (
57            <ChevronsDown
58              className={cn(
59                "size-4 transition-transform duration-300 ease",
60                open ? "rotate-180" : "rotate-0"
61              )}
62            />
63          )}
64        >
65          Can I use it for my project?
66        </AccordionTrigger>
67        <AccordionPanel className="flex flex-col gap-4 text-balance">
68          <p className="text-[15px] text-muted-foreground">
69            Of course! Base UI is free and open source.
70          </p>
71        </AccordionPanel>
72      </AccordionItem>
73    </Accordion>
74  );
75}