Collapsible

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download collapsible -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import * as React from "react";
export default function CollapsibleExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible
      isExpanded={open}
      onExpandedChange={setOpen}
      isDisabled={false}
      className="w-80 space-y-3"
    >
      <CollapsibleTrigger>Countries</CollapsibleTrigger>
      <p>Italy</p>
      <CollapsibleContent>France · Germany · Spain</CollapsibleContent>
    </Collapsible>
  );
}

Examples

Default

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import { Icon } from "@/components/ui/icon";
function Example({ defaultExpanded = false }: { defaultExpanded?: boolean }) {
  return (
    <Collapsible
      defaultExpanded={defaultExpanded}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">Countries</h4>
        <CollapsibleTrigger className="inline-flex h-9 items-center justify-center rounded-md px-3">
          <Icon name="ChevronsUpDown" />
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        Italy
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          USA
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          UK
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}
<Example />;

Open

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import { Icon } from "@/components/ui/icon";
function Example({ defaultExpanded = false }: { defaultExpanded?: boolean }) {
  return (
    <Collapsible
      defaultExpanded={defaultExpanded}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">Countries</h4>
        <CollapsibleTrigger className="inline-flex h-9 items-center justify-center rounded-md px-3">
          <Icon name="ChevronsUpDown" />
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        Italy
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          USA
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          UK
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}
<Example defaultExpanded />;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

This component adds no props of its own to React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.