Component

Collapsible

A compact disclosure built on native details and summary elements.

Preview

Advanced settings

Choose additional options here.

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add collapsible

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@nimjs/ui';

export function Example() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
      <CollapsibleContent>Choose additional options here.</CollapsibleContent>
    </Collapsible>
  );
}

System metadata

Registry

collapsible

Category: disclosure

Status: preview

Version marker: 0.0.0 (unreleased)

Files

collapsible.tsx

Tokens

foregroundmuted-foregroundringradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Collapsible

Native details element that owns open state.

CollapsibleTrigger

Native summary toggle.

CollapsibleContent

Content revealed while open.

Usage patterns

optional details

Use for a small optional section without a multi-item accordion.

API and states

Use defaultOpen for initial uncontrolled state, or open and onOpenChange for controlled state. Compose one CollapsibleTrigger and one CollapsibleContent inside the root.

Accessibility

The native summary is keyboard operable and exposes expanded state. Keep the trigger text meaningful; reduced motion is respected because no animation is imposed.