Components
Accordion
A vertically stacked set of expandable sections.
Accordion is built on the Base UI Accordion primitive. It renders a vertically stacked set of expandable sections with animated open/close transitions.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/accordion.jsonUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
export default function Example() {
return (
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to WAI-ARIA standards.</AccordionContent>
</AccordionItem>
</Accordion>
);
}Examples
Default
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Accordiondata-slot="accordion" | Accordion.RootBase UI | — |
AccordionItemdata-slot="accordion-item" | Accordion.ItemBase UI | — |
AccordionTriggerdata-slot="accordion-trigger" | Accordion.TriggerBase UI | — |
AccordionContentdata-slot="accordion-content" | Accordion.PanelBase UI | — |
Changelog
Full Accordion historyLast updated on