Plinth

Collapsible

Show and hide a single region with animated height.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/collapsible.json

Usage

import {
  Collapsible, CollapsibleTrigger, CollapsiblePanel,
} from "@/components/ui/collapsible";

<Collapsible defaultOpen>
  <CollapsibleTrigger render={<Button variant="ghost">Advanced options</Button>} />
  <CollapsiblePanel>{/* content */}</CollapsiblePanel>
</Collapsible>

Props

Root: open / defaultOpen, onOpenChange, disabled.

Accessibility

  • The trigger gets aria-expanded and aria-controls automatically.
  • For multiple related sections, use an Accordion instead.

Accordion

Vertically stacked disclosure sections with animated height.

Card

Surface for grouping related content and actions.

On this page

InstallUsagePropsAccessibility