collapsible

Collapsible

Content that opens and closes with a height animation under an unstyled trigger, which takes any element through as-child.

States: Default

Parts

Part	File	Does
Collapsible	Collapsible.vue	Groups a trigger with content that can be shown or hidden.
CollapsibleContent	CollapsibleContent.vue	Holds what its collapsible shows while open.
CollapsibleTrigger	CollapsibleTrigger.vue	Opens and closes the content of its collapsible.

Anatomy

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

Styling

Part	Recipe
CollapsibleContent	collapsible-content

Install

Writes 4 files into components/ui/collapsible/. For agents, npx @frontic/ui docs collapsible prints this reference as markdown; the MCP server serves the same.

npm packages: reka-ui

API reference

Collapsible Collapsible.vue

Groups a trigger with content that can be shown or hidden.

Prop	Type	Default
defaultOpen	boolean	false

open	boolean	—

disabled	boolean	false

unmountOnHide	boolean	true

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —

Event	Payload
update:open	value: boolean

Slot	Slot props
default	{ open: boolean; }

Data attribute	Values
data-disabled	—

data-state	'open' \| 'closed'

CollapsibleContent CollapsibleContent.vue

CollapsibleTrigger CollapsibleTrigger.vue

Example