Loading dashboard...
Loading dashboard...
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion defaultValue={["item-1"]}>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>A basic accordion that shows one item at a time. The first item is open by default.
Use the multiple prop to allow multiple items to be open at the same time.
Use the disabled prop on AccordionItem to disable individual items.
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
Wrap the Accordion in a Card component.
See the Base UI documentation for more information.
import {
Accordion,
AccordionContent,import {
Accordion,
AccordionContent,import {
Accordion,
AccordionContent,import {
Accordion,
AccordionContent,import {
Accordion,
AccordionContent,import {
Accordion,
AccordionContent,