Collapsible

An interactive region that can be expanded and collapsed to show or hide content.

Order #4189

StatusShipped

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use the following composition to build a Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

You can wrap layout around the trigger (for example a header row with a Button and CollapsibleTrigger using asChild). CollapsibleContent holds the expandable panel. Behavior and props follow Radix UI Collapsible.

Usage

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@by/experience-system';

Collapsible is a client component ('use client'). Use it inside a Client Component or a dynamic import when using the Next.js App Router.

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden until expanded.</CollapsibleContent>
</Collapsible>

Examples

Overview

Controlled open state with a ghost icon trigger and extra summary rows. The live preview at the top of this page uses the same example (collapsible-overview).

Order #4189

StatusShipped

File tree

Nested folders use a separate Collapsible per directory; the trigger rotates the chevron when data-state is open.

File Explorer

API Reference

The tables below mirror the Radix UI Collapsible API. Subsection titles name the exports from @by/experience-system; Radix part names are noted where they differ. CollapsibleContent adds overflow-hidden and merges className with the experience system; height animation tokens live in packages/experience-system/src/theme/collapsible-motion.css (uses --radix-collapsible-content-height).

Collapsible

Root. Contains all parts of a collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`disabled`	`boolean`	—

Data attribute	Values
`[data-state]`	`"open"` \| `"closed"`
`[data-disabled]`	Present when disabled
`data-slot`	`collapsible`

CollapsibleTrigger

The control that toggles the collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open"` \| `"closed"`
`[data-disabled]`	Present when disabled
`data-slot`	`collapsible-trigger`

CollapsibleContent

The collapsible panel. By default styles include overflow-hidden and a height animation defined in packages/experience-system/src/theme/collapsible-motion.css (uses Radix --radix-collapsible-content-height); extra className values are merged with the cn utility in packages/experience-system/src/lib/utils.ts.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—

Data attribute	Values
`[data-state]`	`"open"` \| `"closed"`
`[data-disabled]`	Present when disabled
`data-slot`	`collapsible-content`

CSS variable	Description
`--radix-collapsible-content-width`	Content width while opening/closing (for width animations).
`--radix-collapsible-content-height`	Content height while opening/closing (for height animations).

Accessibility

Follows the Disclosure WAI-ARIA pattern. Keyboard: Space and Enter toggle when focus is on the trigger (Radix — keyboard interactions).

For the full primitive reference and upstream updates, see Radix UI Collapsible.

Source in the repo: packages/experience-system/src/components/Collapsible/Collapsible.tsx.

Collapsible

Order #4189

Order #4189

On this page