Navigation

Collapsible

One section that opens and closes, lighter than an accordion: advanced options, details, a long list.

Ant Design: Collapse ghost

import { Collapsible } from '@alea/ui';

Examples

Lighter than an accordion: a trigger and its panel.

One section that opens and closes, without the card look of an accordion (shadcn Collapsible, Ant Collapse ghost).

Prop	Type	Default	Description
`children`required	`ReactNode`	-	The content that opens and closes.
`title`required	`ReactNode`	-	The always-visible trigger text.
`className`	`string`	-
`defaultExpanded`	`boolean`	-	Open to start with.
`isExpanded`	`boolean`	-	Open (controlled).
`onExpandedChange`	`((open: boolean) => void)`	-	Called when it opens or closes.

A button with aria-expanded controls the panel; the panel animates to its height (expand pattern).

Key	Does
`Enter` or `Space`	Opens or closes

Don't