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 Accordion2() {
return (
<Accordion
type="single"
collapsible
className="w-full rounded border text-sm max-w-[400px]"
>
<AccordionItem className="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="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="border-b-0 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 { Accordion2 }