Components
A vertically stacked set of collapsible sections built on Base UI's Accordion primitive. Supports single or multiple open items, controlled or uncontrolled state, a custom trigger icon, smooth height-animated panels, and nesting. Ships Accordion, AccordionItem, AccordionTrigger and AccordionPanel (also exported as AccordionContent).
Loading preview...
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/cnippet-accordion";
export default function AccordionMultiple() {
return (
<Accordion className="mx-auto w-full max-w-xl" multiple>
<AccordionItem value="item-1">
<AccordionTrigger>What is Base UI?</AccordionTrigger>
<AccordionPanel>
Base UI is a library of high-quality unstyled React components for
design systems and web apps.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How do I get started?</AccordionTrigger>
<AccordionPanel>
Head to the "Quick start" guide in the docs. If you've used unstyled
libraries before, you'll feel at home.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Can I use it for my project?</AccordionTrigger>
<AccordionPanel>
Of course! Base UI is free and open source.
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...