Collapsible

The Collapsible component is a single expandable section built on Radix UI Collapsible. Use it for FAQs, "Read more" patterns, disclosure widgets, and any one-off toggleable content. For multiple independently-collapsible sections, use Accordion instead.

Import

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@nim-ui/components';

Basic Usage

Code

<Collapsible>
  <CollapsibleTrigger>Show more</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Hidden content revealed on open.</p>
  </CollapsibleContent>
</Collapsible>

Controlled

Manage the open state yourself to drive the component from outside:

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

return (
  <Collapsible open={open} onOpenChange={setOpen}>
    <CollapsibleTrigger>Toggle FAQ</CollapsibleTrigger>
    <CollapsibleContent>
      <p>Answer goes here.</p>
    </CollapsibleContent>
  </Collapsible>
);

Disabled

<Collapsible disabled>
  <CollapsibleTrigger>Disabled trigger</CollapsibleTrigger>
  <CollapsibleContent>This will never open.</CollapsibleContent>
</Collapsible>

Props

Name	Type	Default	Description
`open`	`boolean`	-	Controlled open state of the collapsible
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when the open state changes
`disabled`	`boolean`	`false`	Prevent the user from toggling the collapsible

CollapsibleTrigger

Name	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children*`	`ReactNode`	-	Trigger content

CollapsibleContent

Name	Type	Default	Description
`className`	`string`	-	Additional CSS classes on the inner wrapper
`children*`	`ReactNode`	-	Content revealed when open

Accessibility

Uses aria-expanded on the trigger to communicate open state
Content is properly hidden from assistive tech when closed
Fully keyboard accessible (Space / Enter to toggle)
Works with prefers-reduced-motion — animations are disabled for users who request reduced motion

Accordion - Multiple collapsibles grouped together
Popover - Floating content panel

Collapsible

On this page