Collapsible

Guidelines#

Use it for optional detail under a summary line ("3 steps skipped for 12 prospects — Show"). Several sections: Accordion.

What you provide: open/onOpenChange or defaultOpen, a CollapsibleTrigger (a ghost small Button whose label says what happens: "Show" / "Hide"), and CollapsibleContent.

Facts#

API#

TypeScript declarations emitted from src/components/ui/collapsible.tsx (the module also exports its other parts).

declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): JSX.Element;
declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): JSX.Element;
declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): JSX.Element;
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  var s = React.useState(true);
  return h(DC.Collapsible, { open: s[0], onOpenChange: s[1], className: "max-w-md grid gap-2" },
    h("div", { className: "flex items-center justify-between" },
      h("p", { className: "text-sm font-medium" }, "3 steps skipped for 12 prospects"),
      h(DC.CollapsibleTrigger, { asChild: true }, h(DC.Button, { variant: "ghost", size: "sm" }, s[0] ? "Hide" : "Show"))),
    h(DC.CollapsibleContent, { className: "grid gap-2" },
      h("div", { className: "rounded-md border px-3 py-2 text-sm" }, "8 need a LinkedIn URL"),
      h("div", { className: "rounded-md border px-3 py-2 text-sm" }, "4 have no verified email")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Layout#