Plinth

Accordion

Vertically stacked disclosure sections with animated height.

Because every component styles against roles, one file rebrands the whole system.

Install

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

Usage

import {
  Accordion, AccordionItem, AccordionTrigger, AccordionPanel,
} from "@/components/ui/accordion";

<Accordion multiple={false} defaultValue={["first"]}>
  <AccordionItem value="first">
    <AccordionTrigger>Question</AccordionTrigger>
    <AccordionPanel>Answer.</AccordionPanel>
  </AccordionItem>
</Accordion>

Props

Root: multiple (default true), value / defaultValue (array of open item values), onValueChange, disabled. Item: value, disabled.

Accessibility

  • Triggers are buttons inside heading elements with aria-expanded; arrow keys move between triggers, Home/End jump.
  • The height animation uses the panel's measured height variable and respects reduced-motion preferences via the motion tokens.

Tree View

File-explorer style tree with expand/collapse and full keyboard navigation.

Collapsible

Show and hide a single region with animated height.

On this page

InstallUsagePropsAccessibility