Accordion
Stacked sections that expand and collapse, for FAQs, rules and settings groups, built on Base UI.
Preview
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@vitnode/core/components/ui/accordion'<Accordion defaultValue={['register']}>
<AccordionItem value="register">
<AccordionTrigger>How do I create an account?</AccordionTrigger>
<AccordionContent>
<p>Click Sign up in the top bar and fill in your email.</p>
</AccordionContent>
</AccordionItem>
</Accordion>defaultValue and value are arrays of item values, even when only one item
can be open.
Multiple
By default, opening an item closes the others. multiple lets several stay
open.
<Accordion defaultValue={['kind', 'search']} multiple>Find in page
With hiddenUntilFound, closed panels stay in the DOM and the browser's
Ctrl + F can find and open them. Great for long FAQs.
<Accordion hiddenUntilFound>