Components
Loading preview...
A vertically stacked set of interactive headings that each reveal a section of content.
npx shadcn@latest add https://21st.dev/r/shadcn/accordionimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
function Accordion3() {
return (
<Accordion type="single" collapsible className="w-full space-y-4 text-sm max-w-[400px]">
<AccordionItem
className="rounded border bg-primary-foreground px-4"
value="item-1"
>
<AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
<AccordionContent className="text-muted-foreground">
Micro-interactions are events which have one main task — a single
purpose — and they are found all over your device and within apps.
</AccordionContent>
</AccordionItem>
<AccordionItem
className="rounded border bg-primary-foreground px-4"
value="item-2"
>
<AccordionTrigger>
Why should I use a micro-interaction?
</AccordionTrigger>
<AccordionContent className="text-muted-foreground">
You should use micro-interactions to enhance a simple task and to make
the experience more enjoyable.
</AccordionContent>
</AccordionItem>
<AccordionItem
className="rounded border bg-primary-foreground px-4"
value="item-3"
>
<AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
<AccordionContent className="text-muted-foreground">
Start by thinking about the task you want the user to perform.
</AccordionContent>
</AccordionItem>
</Accordion>
);
}
export { Accordion3 }