PlumUI

Accordion

Vertically stacked sections that expand with a measured height animation and a soft blur-in.

NavigationRadix Accordion

Yes. It follows the WAI-ARIA accordion pattern, with full keyboard support and proper focus management.

Playground

Tweak the props, the preview and the code follow.

Yes, upgrades apply immediately and downgrades at the end of the cycle.

Props
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Can I change plans later?</AccordionTrigger>
    <AccordionContent>Yes, upgrades apply immediately.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">…</AccordionItem>
</Accordion>

Installation

npx @plumsydev/plum-ui add accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple

Let several sections stay open with type="multiple".

You're billed monthly per active seat. Seats added mid-cycle are prorated to the day.

Upgrade or downgrade anytime from Settings → Billing. Changes apply immediately.

Inside a card

Compose with icons and a bordered surface.

API Reference

Accordion

Root. Accepts every Radix Accordion.Root prop.

PropTypeDefault
type*

Whether one or several items can be open.

"single" | "multiple"—
collapsible

With `single`, allows closing the open item.

booleanfalse
defaultValue

Initially open item(s).

string | string[]—
value / onValueChange

Controlled state.

string | string[]—

AccordionItem

PropTypeDefault
value*

Unique value of the item.

string—
disabled

Prevents interaction.

booleanfalse

Notes

  • Height is animated with the pl-collapse utility from the theme, driven by Radix's measured --radix-accordion-content-height.
NextAlert