Skip to content
earthlingUI
Components

Collapsible

Lets people reveal or hide a single region of supporting content.

Repository access

3 connected projects

earthling-ui

Playground

disabled

Prevents the disclosure from being toggled.

Usage

tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "earthling-ui/collapsible";

export function Example() {
  return (
    <>
      <Collapsible>
        <CollapsibleTrigger>Show repository access</CollapsibleTrigger>
        <CollapsibleContent>Three connected repositories.</CollapsibleContent>
      </Collapsible>
    </>
  );
}
  • Use CollapsibleTrigger for the control so expanded state and keyboard behavior stay synchronized.
  • Give icon-only triggers an accessible label that names the content they toggle.
  • Prefer Accordion when several sibling sections need coordinated expansion behavior.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

bash
npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx
// Generated by dts-bundle-generator v9.5.1

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
export declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;

export {};

Runtime dependencies: @radix-ui/react-collapsible.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Collapsible implementation
tsx
"use client";

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

const Collapsible = CollapsiblePrimitive.Root;

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

export { Collapsible, CollapsibleTrigger, CollapsibleContent };