Collapsible

An interactive component which expands/collapses a panel.

tsx

1
2
3
4<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>

Collapsible — un seul bloc dévoilable (un accordion, mais standalone, sans siblings). Utile pour un "afficher plus" ou un panel avancé optionnel.

Pour plusieurs sections empilées, préférer Accordion.

Installation

Terminal

$ bext ui add collapsible

Usage

tsx

1
2
3
4
5
6import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@bext-stack/ui/primitives"

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>Yes. Free to use for personal and commercial projects.</CollapsibleContent>
</Collapsible>

Anatomy

<Collapsible defaultOpen?>
  ├── <CollapsibleTrigger>Show more</CollapsibleTrigger>
  └── <CollapsibleContent>Hidden content...</CollapsibleContent>
</Collapsible>

API Reference

Collapsible

Prop	Type	Default	Description
defaultOpen	boolean	false	undefined
children	ReactNode	—	undefined

CollapsibleTrigger

Prop	Type	Default	Description
children	ReactNode	—	undefined

CollapsibleContent

Prop	Type	Default	Description
children	ReactNode	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="collapsible"	Collapsible root	undefined	undefined
data-state	Collapsible root, CollapsibleContent	"open" \| "closed"	undefined

Keyboard

Key	Action
`Enter / Space`	Ouvrir/fermer.

Accessibility

Trigger porte aria-expanded aria-controls. Content porte hidden quand fermé.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
  return (
    <main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Collapsible</h1>
      <p style="color:#64748b;margin-top:0">A trigger toggles a region in/out of the DOM via &lt;Show&gt; (reactive).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A single region that expands and collapses on a trigger click.
// The open/closed state lives in a "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Collapsible</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An expandable region toggled by its header.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Checkbox Combobox →

On This Page