Components
Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI Accordion.
Preview
Installation
npx blackboard-ui@latest add accordionUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Example() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>
);
}Examples
Default
A single-expand accordion with collapsible behavior. Only one item can be open at a time.
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled?</AccordionTrigger>
<AccordionContent>
Yes. It comes with default styles that match the design system.
</AccordionContent>
</AccordionItem>
</Accordion>Variants
Use the variant prop on AccordionItem to switch between a clean border-bottom style and a bordered card style.
Default
Bordered
{/* Default — border bottom */}
<AccordionItem value="item-1">
<AccordionTrigger>Question</AccordionTrigger>
<AccordionContent>Answer</AccordionContent>
</AccordionItem>
{/* Bordered — card-like */}
<AccordionItem value="item-1" variant="bordered">
<AccordionTrigger>Question</AccordionTrigger>
<AccordionContent>Answer</AccordionContent>
</AccordionItem>Multiple
Set type="multiple" to allow multiple items to be expanded at the same time.
<Accordion type="multiple">
<AccordionItem value="item-1">
<AccordionTrigger>First item</AccordionTrigger>
<AccordionContent>Content for first item.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Second item</AccordionTrigger>
<AccordionContent>Content for second item.</AccordionContent>
</AccordionItem>
</Accordion>API Reference
Accordion
| Prop | Type | Default |
|---|---|---|
| type | "single" | "multiple" | — |
| collapsible | boolean | false |
| defaultValue | string | string[] | — |
| disabled | boolean | false |
AccordionItem
| Prop | Type | Default |
|---|---|---|
| value | string | — |
| variant | "default" | "bordered" | "default" |
| disabled | boolean | false |
| className | string | — |
AccordionTrigger
| Prop | Type | Default |
|---|---|---|
| className | string | — |
AccordionContent
| Prop | Type | Default |
|---|---|---|
| className | string | — |
Also accepts all Radix Accordion props.