Collapsible

An interactive component that expands and collapses a single panel of content.

Default

Collapsible lets users show and hide content with a trigger.

@hummingbird/react

Tailwind CSS

tsx

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@hummingbirdui/react";
import { ChevronsUpDown } from "lucide-react";

export default function CollapsibleDefault() {
  return (
    <Collapsible className="mx-auto w-full max-w-md space-y-2">
      <div className="flex items-center justify-between gap-4">
        <span className="font-semibold">@hummingbird/react</span>
        <CollapsibleTrigger asChild>
          <Button variant="outline" color="secondary" size="sm" shape="square">
            <ChevronsUpDown className="size-4" />
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
        Tailwind CSS
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
          Radix Primitives
        </div>
        <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
          Hummingbird UI
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Open By Default

Use defaultOpen to render the panel expanded by default.

Collapsible is built on Radix UI's headless primitive, so keyboard interaction and ARIA wiring are handled automatically.

tsx

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@hummingbirdui/react";

export default function CollapsibleDefaultOpen() {
  return (
    <Collapsible defaultOpen className="mx-auto w-full max-w-md space-y-2">
      <CollapsibleTrigger asChild>
        <Button variant="outline" color="primary" size="sm">
          Show details
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          Collapsible is built on Radix UI&apos;s headless primitive, so
          keyboard interaction and ARIA wiring are handled automatically.
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Controlled

Use open with onOpenChange to control the open state.

The panel is closed.

tsx

import * as React from "react";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@hummingbirdui/react";

export default function CollapsibleControlled() {
  const [open, setOpen] = React.useState(false);

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="mx-auto w-full max-w-md space-y-2"
    >
      <div className="flex items-center justify-between gap-4">
        <span className="text-sm">
          The panel is {open ? "open" : "closed"}.
        </span>
        <CollapsibleTrigger asChild>
          <Button variant="outline" color="secondary" size="sm">
            {open ? "Close" : "Open"}
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          The parent component owns the open state through <code>open</code> and{" "}
          <code>onOpenChange</code>.
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Disabled

Set disabled on the root to prevent the panel from being toggled.

tsx

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@hummingbirdui/react";

export default function CollapsibleDisabled() {
  return (
    <Collapsible disabled className="mx-auto w-full max-w-md space-y-2">
      <CollapsibleTrigger asChild>
        <Button variant="outline" color="secondary" size="sm" disabled>
          Toggle
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          This panel cannot be opened.
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

API Reference

For detailed usage guidelines, see the Radix UI documentation.

Styling

Collapsible is a behavior-only primitive and ships no Hummingbird classes of its own. The panel's height is animated through data-state; the trigger and content take any Hummingbird utility classes as needed.

PreviousClose Button NextDialog