Display

Collapsible

Animated show/hide for a single section.

Import

tsx

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

bash

npx cronus-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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CollapsibleDefault layout:inline style:collapsible {
  label "Toggle"
  text "Hidden body"
}

page "/audit/collapsible/default" type:custom {
  use CollapsibleDefault
}

API Reference

Generated from the component's exported types.

CollapsibleProps

Extends ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.

CollapsibleTriggerProps

Extends ComponentPropsWithoutRef< typeof CollapsiblePrimitive.CollapsibleTrigger >

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

CollapsibleContentProps

Extends ComponentPropsWithoutRef< typeof CollapsiblePrimitive.CollapsibleContent >

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.