Accordion Multiple
accordion-multiple.tsx
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"
export default function AccordionMultipleDemo() {
return (
<Accordion className="w-full max-w-lg" multiple={true}>
<AccordionItem value="item-1">
<AccordionTrigger>What is Base UI?</AccordionTrigger>
<AccordionPanel>
Honest UI gives you thoughtful components with visible, editable
code that stays in your project.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How do I get started?</AccordionTrigger>
<AccordionPanel>
Head to the “Get started” guide in the docs. If you’ve used
component libraries before, you’ll feel at home.
</AccordionPanel>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
Can I use it for my project?
</AccordionTrigger>
<AccordionPanel>
Yes. Honest UI is free and open source.
</AccordionPanel>
</AccordionItem>
</Accordion>
)
}
- Interaction
- accordion