Collapsible

Installation

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

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

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

Usage

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

Examples

Default

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
<Collapsible 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 asChild>
      <Button variant="ghost" size="sm">
        <Icon name="ChevronsUpDown" />
      </Button>
    </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>;

Open

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Icon } from "@/components/ui/icon";
<Collapsible defaultOpen 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 asChild>
      <Button variant="ghost" size="sm">
        <Icon name="ChevronsUpDown" />
      </Button>
    </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>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

This component adds no props of its own to Radix UI.

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