Accordion
Vertically stacked panels that expand to reveal content
import { Accordion } from "@plexui/ui/components/Accordion";Compose with Accordion.Item, Accordion.Trigger, and Accordion.Content. Built on Radix Accordion, so the primitive handles keyboard navigation, focus management, and WAI-ARIA semantics.
Examples
Overview
We offer standard (5–7 business days), express (2–3 days), and overnight shipping. Free standard shipping on orders over $50.
Single
14 days, no credit card required. At the end of the trial you can keep the free tier or upgrade to Pro — your projects stay in place either way.
Multiple
Pick which events trigger email, push, or in-app alerts. Release-blocker incidents always page the on-call regardless of quiet hours.
Disabled
Yes — the Activity tab logs every API call, deploy, and admin action for the last 90 days. Longer retention requires the Enterprise plan.
Card
Subscription & billing
Common questions about plans, invoices, and cancellations.
Starter ($9/mo), Pro ($29/mo), and Enterprise (from $99/mo). Each tier raises seat, project, and API call limits; Enterprise adds SSO, audit log export, and a dedicated success manager.
API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Whether one item or many can be open at a time |
value | string | string[] | — | Controlled open item(s) |
defaultValue | string | string[] | — | Uncontrolled initial open item(s) |
onValueChange | (value) => void | — | Fires when the open item(s) change |
collapsible | boolean | false | When type="single", allow closing the open item |
disabled | boolean | false | Disable every item |
dir | "ltr" | "rtl" | "ltr" | Reading direction |
orientation | "horizontal" | "vertical" | "vertical" | Layout axis |
className | string | — | Applied to the root <div> |
Accordion.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Required. Unique identifier used by value / defaultValue |
disabled | boolean | false | Disable this item |
className | string | — | Applied to the item wrapper |
Accordion.Trigger
Renders a <button> inside an <h3> header, with a chevron that rotates when the item opens. Accepts all native <button> props.
Accordion.Content
Renders the collapsible panel. Radix sets --radix-accordion-content-height so the open/close animation interpolates from 0 to the measured content height.
Styling
Colors, spacing, and transitions are controlled by component tokens:
--accordion-item-divider-color— border between items (defaults to--color-border)--accordion-item-divider-width— divider thickness (defaults to1px)--accordion-item-disabled-opacity— disabled item opacity (defaults to0.5)--accordion-trigger-color— trigger text color--accordion-trigger-font-size/--accordion-trigger-font-weight/--accordion-trigger-line-height— trigger typography--accordion-trigger-padding-block— trigger vertical padding--accordion-trigger-gap— space between label and chevron--accordion-trigger-focus-ring-color— focus ring color--accordion-icon-color/--accordion-icon-size— chevron color and size--accordion-content-color/--accordion-content-font-size/--accordion-content-line-height— content typography--accordion-content-padding-bottom— space between content text and the next divider--accordion-transition-duration/--accordion-transition-ease— open/close animation
Override at any scope to tune the look:
.my-faq {
--accordion-trigger-font-size: var(--font-text-base-size);
--accordion-item-divider-color: var(--color-border-strong);
}