videorc/uiCollapsible
One section that opens and closes under its trigger, such as advanced settings. Unstyled, so the trigger is whatever control fits.
Installation
$ pnpm dlx shadcn@latest add @videorc/collapsibleUsage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";<Collapsible>
<CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
<CollapsibleContent>{settings}</CollapsibleContent>
</Collapsible>Anatomy
<Collapsible>
<CollapsibleTrigger />
<CollapsibleContent />
</Collapsible>Theming
| Token or attribute | Meaning |
|---|---|
data-panel-open | On the trigger while open: turn a chevron with group-data-panel-open:rotate-180 |
data-open, data-closed | On the root and the panel |
--collapsible-panel-height | The panel's measured height, to animate it |
Keyboard
| Key | Action |
|---|---|
| Enter Space | Opens or closes the panel |
Accessibility
The trigger is a button with aria-expanded and aria-controls. Render your own button with render={<Button variant="ghost" />} to keep the desktop sizes; wrap the trigger in a heading when the section is one.
API reference
Every Base UI Collapsible prop: open, defaultOpen and onOpenChange on Collapsible, render on CollapsibleTrigger, and keepMounted or hiddenUntilFound on CollapsibleContent (the Base UI Panel).
Accordion
Stacked sections that open in place, in a bordered group on the row radius. One open at a time, or several with multiple.
Chrome Row
The class names for the Stream Manager's chrome rows, the plate on the row that's on stream and the quieter one on a member's row, so a screen never names a chrome material itself.