Collapsible

Single expandable section that reveals or hides its content on toggle.

Examples

Simple show/hide section triggered by a header button.

Collapsible that starts in the expanded state.

These settings are visible by default and can be collapsed.

Trigger includes a leading icon for visual context.

Collapsible sections within collapsible sections.

Collapsible used as a settings section.

Debug modeVerbose loggingTelemetry

Collapsible sections forming a file tree structure.

Button.tsx

Card.tsx

Input.tsx

index.ts

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { Collapsible } from "@rokle/components";

import { Collapsible } from "@rokle/components";

export function Example() {
  return <Collapsible />;
}

Prop	Type	Default	Description
open	boolean	false	Whether the section is expanded.
onOpenChange	(open: boolean) => void	-	Called when open state changes.
children	ReactNode	-	Collapsible content.