Accordion

Base UI-powered Accordion with a flush borderless look — the header hover highlight bleeds outside the text column so titles stay aligned with surrounding copy, plus an outlined FAQ-style variant.

import { Accordion } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Default

The title text column is the alignment reference: the hover highlight and hit area extend 8px (--accordion-hover-inset) beyond the component box without shifting layout.

Loading preview

Outlined

Container border with dividers between items. The first example is single-open (multiple={false}), the second places the indicator at the end.

Loading preview

Inline indicator

Loading preview

Atom Components

Loading preview

APIs

Accordion

Accordion properties

className: string
classNames: AccordionClassNames
defaultValue: string[]
gap: number
hideIndicator: boolean
indicatorPlacement: 'end' | 'start' | 'inline'
Defaults to "start".
items: AccordionItemType[]
keepMounted: boolean
multiple: boolean
Defaults to true.
onValueChange: (value: string[]) => void
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
style: CSSProperties
styles: AccordionStyles
value: string[]
variant: 'outlined' | 'borderless'
Defaults to "borderless".

AccordionItemType

Property	Description	Type	Default
key	Unique value identifying the item	`string`	-
title	Header title	`ReactNode`	-
children	Panel content	`ReactNode`	-
action	Actions shown at the header end on hover	`ReactNode`	-
alwaysShowAction	Show the action without hovering	`boolean`	`false`
disabled	Whether the item is disabled	`boolean`	`false`

Indicator placement

start (default) — chevron before the title; panel content is indented to align with the title.
inline — small filled arrow right after the title; no panel indent, no hover inset and no trailing panel padding; a hover action adds 4px block padding so a 24px action yields the 32px sidebar header (the compact sidebar look).
end — chevron pushed to the trailing edge of the header.

Variants

borderless (default) — flush look; hover highlight bleeds 8px outside via --accordion-hover-inset.
outlined — rounded container border with 1px dividers between items.