Component reference
Accordion
Application-controlled disclosure of related content.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Badge,
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent
} from "@pimolu/react";
function ControlledAccordion() {
const [value, setValue] = useState<string | undefined>("tokens");
return (
<div className="grid gap-5 min-w-0">
<Badge variant="primary">
{value ?? "closed"}
</Badge>
<Accordion type="single" collapsible value={value} onValueChange={setValue}>
<AccordionItem value="tokens">
<AccordionTrigger>Design tokens</AccordionTrigger>
<AccordionContent>
Colours, spacing, radius and type are generated from one token
pipeline.
</AccordionContent>
</AccordionItem>
<AccordionItem value="themes">
<AccordionTrigger>Themes and presets</AccordionTrigger>
<AccordionContent>
Light, dark and six visual presets share the same semantic
variables.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
}
export function DemoExample() {
return (<ControlledAccordion />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Single
One item at a time; collapsible lets the open item close again.
Multiple
Any number of sections can stay open.
Variants
Enumerated from accordionVariantMap: default, separated and ghost.
Usage
Choose single or multiple expansion according to whether users compare panels.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluAccordionProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
variant | "ghost" | "default" | "separated" | undefined | "default" | Visual treatment. Defaults to "default". |
collapsible | boolean | undefined | false | In single mode, allow closing the open item. Defaults to false. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
type | "single" | "multiple" | undefined | — | Public Pimolu prop; see the source declaration for details. |
value | string | string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
onValueChange | ((value: string | undefined) => void) | ((value: string[]) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
variant"ghost" | "default" | "separated" | undefinedDefault: "default"
Visual treatment. Defaults to "default".
collapsibleboolean | undefinedDefault: false
In single mode, allow closing the open item. Defaults to false.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
type"single" | "multiple" | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
valuestring | string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onValueChange((value: string | undefined) => void) | ((value: string[]) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluAccordionItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Value shared with the trigger and content. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Value shared with the trigger and content.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluAccordionTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluAccordionContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Keep heading order meaningful and verify Enter/Space activation on the triggers.