Collapsible

Disclosure rows with a chevron that turns in 180ms and a measured height animation; Accordion groups them.

<div className="w-480">
      <Collapsible title="Advanced" hint="2 settings">
        <p className="text-body text-fg-secondary">Timeout overrides and the egress dialect.</p>
      </Collapsible>
    </div>

import { Collapsible, Accordion } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
The content that shows when it is open.
defaultOpen
boolean
Whether it starts open, when the component keeps its own state.
hint
ReactNode
Secondary text at the end of the row.
onOpenChange
((open: boolean) => void)
Called when it opens or closes.
open
boolean
Whether it is open, when you control it.
title
ReactNode
The heading that opens and closes it.