Collapsible

A collapsible panel controlled by a button.

import { ChevronDownIcon } from "lucide-react";

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export default function Particle() {
  return (
    <Collapsible>
      <CollapsibleTrigger className="inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180">
        Show recovery keys
        <ChevronDownIcon className="size-4" />
      </CollapsibleTrigger>
      <CollapsiblePanel>
        <ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            4829-1735-6621
          </li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            9182-6407-5532
          </li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            3051-7924-9018
          </li>
        </ul>
      </CollapsiblePanel>
    </Collapsible>
  );
}

Installation


pnpm dlx shadcn@latest add @coss/collapsible

Usage

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>

API Reference

Collapsible

Root component. Alias for Collapsible.Root from Base UI.

CollapsibleTrigger

Trigger button that toggles the collapsible panel. Styled wrapper for Collapsible.Trigger from Base UI.

CollapsiblePanel

Collapsible content panel. Styled wrapper for Collapsible.Panel from Base UI with animated height transitions. Also exported as CollapsibleContent.

On This Page

Installation Usage API Reference Collapsible CollapsibleTrigger CollapsiblePanel