Noarka UI logonoarka ui

Accordion

Stacked expandable sections with animated panels.

An open-source React component library built on Base UI primitives.

Installation

npx @noarka/cli add accordion

Usage

tsx
import {  Accordion,  AccordionChevron,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@noarka/ui";
tsx
<Accordion defaultValue={["shipping"]}>  <AccordionItem value="shipping">    <AccordionTrigger>      How long does shipping take? <AccordionChevron />    </AccordionTrigger>    <AccordionContent>      <p className="px-4 pt-1 pb-4 text-sm text-muted-foreground">        Orders arrive within 3 to 5 business days.      </p>    </AccordionContent>  </AccordionItem></Accordion>

Examples

Single open panel

Only one item stays open at a time. Opening another closes the first.

Free returns within 30 days.

Multiple open panels

Pass multiple to keep more than one item open at a time.

Free returns within 30 days.

Disabled item

Items accept disabled to lock them closed.

Free returns within 30 days.

API reference

Accordion

PropTypeDefault
defaultValue

Initially expanded item values (uncontrolled).

string[]-
value

Controlled expanded item values. Use with onValueChange.

string[]-
onValueChange

Called when an item is expanded or collapsed.

(value: string[]) => void-
multiple

Allow more than one item to stay open at a time.

booleanfalse
disabled

Ignore user interaction across the whole accordion.

booleanfalse
orientation

Controls whether roving focus uses left/right or up/down arrow keys.

"horizontal" | "vertical""vertical"
loopFocus

Loop keyboard focus back to the first item at the end of the list.

booleantrue
keepMounted

Keep panel content in the DOM while closed.

booleanfalse
hiddenUntilFound

Hide closed panels with hidden="until-found" so browser find can expand them.

booleanfalse

AccordionItem

PropTypeDefault
value

Unique identifier for the item. If omitted, an ID is generated automatically: set it to preselect or control the item via value / defaultValue.

string-
disabled

Lock this item closed.

booleanfalse
onOpenChange

Called when this item's panel opens or closes.

(open: boolean) => void-

AccordionTrigger

PropTypeDefault
render

Polymorphic render prop. Use to render a custom element instead of the default button.

ReactElement | ((props) => ReactNode)-
className

Additional classes merged with the default trigger styles.

string-
disabled

Disable this trigger. Inherits the native button disabled behavior.

booleanfalse

AccordionContent

PropTypeDefault
render

Polymorphic render prop. Use to render a custom element instead of the default panel div.

ReactElement | ((props) => ReactNode)-
className

Additional classes merged with the default panel styles.

string-
keepMounted

Keep the panel content in the DOM while closed.

booleanfalse
hiddenUntilFound

Hide the closed panel with hidden="until-found" so browser find can expand it.

booleanfalse