Data Display

Collapsible

Animated show/hide for a single section.

Import

tsx

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@cooud-ui/ui";

bash

npx cooud-ui add collapsible

Examples

Default

An animated show/hide for a single section. Control it with `open` and `onOpenChange`, and put the toggle inside `CollapsibleTrigger`.

Deployment regions

tsx

function CollapsibleDemo() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-sm space-y-2">
      <div className="flex items-center justify-between gap-4 rounded-lg border border-border px-4 py-2">
        <span className="text-sm font-medium text-fg">Deployment regions</span>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon-sm" aria-label="Toggle regions">
            <ChevronsUpDown />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="space-y-2">
        {["us-east-1", "eu-west-1", "ap-southeast-2"].map((region) => (
          <div key={region} className="rounded-lg border border-border px-4 py-2 font-mono text-sm">
            {region}
          </div>
        ))}
      </CollapsibleContent>
    </Collapsible>
  );
}