Fluixi UI
GitHub ↗

Examples

Loading preview…

collapsible

A single collapsible section with animated open/close state.


A minimal headless collapsible — a single trigger that shows/hides one content region. For stacked sections use @fluixi/accordion instead.

Installation

pnpm add @fluixi/collapsible

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@fluixi/collapsible';

<Collapsible defaultOpen>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content here.</CollapsibleContent>
</Collapsible>

Parts

Part Description
Collapsible Root. Controlled (open) or uncontrolled (defaultOpen) with onOpenChange. disabled prevents toggling.
CollapsibleTrigger Button that toggles the content; aria-expanded and aria-controls are wired automatically.
CollapsibleContent The region that shows/hides; data-state is open/closed.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.