Explorer

Accordion

Vertically collapsible content panels with smooth height animations.

Componentsdocsbase-ui/accordion

Installation

npx shadcn@latest add https://ui.edbn.me/r/accordion.json

Manual

API Reference

Root

Groups all parts of the accordion. Renders a div element.

valueValue[]

Controlled values of the expanded items

defaultValueValue[]

Initial values of the expanded items

onValueChange(value, eventDetails) => void

Called when an item is expanded or collapsed

multipleboolean

=false

Allow multiple items to be open

disabledboolean

=false

Ignore user interaction for the whole accordion

orientation'vertical' | 'horizontal'

='vertical'

Controls visual orientation and arrow-key direction

loopFocusboolean

=true

Loop arrow-key focus from the last item to the first

hiddenUntilFoundboolean

=false

Keep closed panel content findable with hidden='until-found'

keepMountedboolean

=false

Keep closed panels in the DOM; ignored when hiddenUntilFound is enabled

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered element

Root data attributes
Attribute	Description
data-disabled	Present when the accordion is disabled
data-orientation	Accordion orientation

Item

Groups an accordion header with the corresponding panel. Renders a div element.

valueany

=auto-generated

Unique value that identifies this item

disabledboolean

=false

Disable this item

onOpenChange(open, eventDetails) => void

Called when this item opens or closes

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered element

Item data attributes
Attribute	Description
data-index	Index of the accordion item
data-disabled	Present when the item is disabled
data-open	Present when the item is open

Header

A heading that labels the corresponding panel. Renders an h3 element.

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered heading

Header data attributes
Attribute	Description
data-index	Index of the accordion item
data-disabled	Present when the item is disabled
data-open	Present when the item is open

Trigger

A button that opens and closes the corresponding panel. Renders a button element.

nativeButtonboolean

=true

Set false when the render prop replaces the button with a non-button element

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered button

Trigger data attributes
Attribute	Description
data-panel-open	Present when the panel is open
data-disabled	Present when the item is disabled

Panel

A collapsible panel with the accordion item contents. Renders a div element.

hiddenUntilFoundboolean

=false

Keep closed content findable with hidden='until-found'

keepMountedboolean

=false

Keep this panel in the DOM while closed; ignored when hiddenUntilFound is enabled

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered panel

Panel data attributes
Attribute	Description
data-index	Index of the accordion item
data-open	Present when the panel is open
data-orientation	Accordion orientation
data-disabled	Present when the item is disabled
data-starting-style	Present when the panel is animating in
data-ending-style	Present when the panel is animating out

Panel CSS variables
Variable	Description
--accordion-panel-height	Measured natural panel height
--accordion-panel-width	Measured natural panel width

edbn/ui

Explorer

Accordion

Vertically collapsible content panels with smooth height animations.

Componentsdocsbase-ui/accordion

Installation

npx shadcn@latest add https://ui.edbn.me/r/accordion.json

Manual

API Reference

Root

Groups all parts of the accordion. Renders a div element.

valueValue[]

Controlled values of the expanded items

defaultValueValue[]

Initial values of the expanded items

onValueChange(value, eventDetails) => void

Called when an item is expanded or collapsed

multipleboolean

=false

Allow multiple items to be open

disabledboolean

=false

Ignore user interaction for the whole accordion

orientation'vertical' | 'horizontal'

='vertical'

Controls visual orientation and arrow-key direction

loopFocusboolean

=true

Loop arrow-key focus from the last item to the first

hiddenUntilFoundboolean

=false

Keep closed panel content findable with hidden='until-found'

keepMountedboolean

=false

Keep closed panels in the DOM; ignored when hiddenUntilFound is enabled

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered element

Root data attributes
Attribute	Description
data-disabled	Present when the accordion is disabled
data-orientation	Accordion orientation

Item

Groups an accordion header with the corresponding panel. Renders a div element.

valueany

=auto-generated

Unique value that identifies this item

disabledboolean

=false

Disable this item

onOpenChange(open, eventDetails) => void

Called when this item opens or closes

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered element

Item data attributes
Attribute	Description
data-index	Index of the accordion item
data-disabled	Present when the item is disabled
data-open	Present when the item is open

Header

A heading that labels the corresponding panel. Renders an h3 element.

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered heading

Header data attributes
Attribute	Description
data-index	Index of the accordion item
data-disabled	Present when the item is disabled
data-open	Present when the item is open

Trigger

A button that opens and closes the corresponding panel. Renders a button element.

nativeButtonboolean

=true

Set false when the render prop replaces the button with a non-button element

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered button

Trigger data attributes
Attribute	Description
data-panel-open	Present when the panel is open
data-disabled	Present when the item is disabled

Panel

A collapsible panel with the accordion item contents. Renders a div element.

hiddenUntilFoundboolean

=false

Keep closed content findable with hidden='until-found'

keepMountedboolean

=false

Keep this panel in the DOM while closed; ignored when hiddenUntilFound is enabled

classNamestring | ((state) => string)

Class name or state-based class callback

styleCSSProperties | ((state) => CSSProperties)

Style object or state-based style callback

renderReactElement | ((props, state) => ReactElement)

Replace or compose the rendered panel

Panel data attributes
Attribute	Description
data-index	Index of the accordion item
data-open	Present when the panel is open
data-orientation	Accordion orientation
data-disabled	Present when the item is disabled
data-starting-style	Present when the panel is animating in
data-ending-style	Present when the panel is animating out

Panel CSS variables
Variable	Description
--accordion-panel-height	Measured natural panel height
--accordion-panel-width	Measured natural panel width