Collapsible

Expandable region with animated panel.

Installation

npx @noarka/cli add collapsible

Usage

tsx

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

tsx

<Collapsible>  <CollapsibleTrigger className="group flex w-full items-center justify-between rounded-xl px-2 py-1.5 text-sm font-medium">    Shipping options    <AltArrowDownLinearIcon size={16} className="transition-transform group-data-panel-open:rotate-180" />  </CollapsibleTrigger>  <CollapsibleContent>    <p className="px-2 pt-2 text-sm text-muted-foreground">      Standard delivery arrives in 3 to 5 business days. Express arrives tomorrow.    </p>  </CollapsibleContent></Collapsible>

Examples

Open by default

Pass defaultOpen to render the panel expanded on first paint.

12 orders in the last year, totalling £1,240.

Disabled

Pass disabled to lock the panel shut.

API reference

Collapsible

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open panel (uncontrolled).	`boolean`	`false`
`onOpenChange` Called when the panel is opened or closed.	`(open: boolean) => void`	`-`
`disabled` Ignore user interaction across the whole collapsible.	`boolean`	`false`

CollapsibleTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Edit</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

CollapsibleContent

Prop	Type	Default
`keepMounted` Keep panel content in the DOM while closed.	`boolean`	`false`
`hiddenUntilFound` Hide the closed panel with hidden="until-found" so browser find can expand it.	`boolean`	`false`
`className` Additional classes merged with the default panel styles.	`string`	`-`