Collapsible

Collapsible keeps optional content reachable without expanding the page by default.

import Collapsible from '@/components/ui/collapsible';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add Collapsible

pnpm dlx @nateui/cli@latest add Collapsible

yarn dlx @nateui/cli@latest add Collapsible

Examples

Basic

import Collapsible from '@/components/ui/collapsible';

export default function BasicDemo() {
  return (

Controlled

import { useState } from 'react';
import Button from '@/components/ui/button';
import Collapsible from '@/components/ui/collapsible';
import { ChevronUp, ChevronDown } from '@/components/ui/icons';

Accordion

import { useState } from 'react';
import Collapsible from '@/components/ui/collapsible';

const faqs = [

Custom trigger

import Collapsible from '@/components/ui/collapsible';
import Button from '@/components/ui/button';
import { Plus, Minus } from '@/components/ui/icons';

API

Collapsible is a compound component: a root Collapsible that owns the open state, Collapsible.Trigger for the toggle, and Collapsible.Content for the animated region.

Collapsible

Collapsible accepts the props below plus native props for the root div.

Prop	Description	Type	Default
`children`	Trigger and content parts rendered inside the collapsible.	`ReactNode`	-
`className`	Class names applied to the root `div`.	`string`	-
`defaultOpen`	Initial open state for uncontrolled usage.	`boolean`	`false`
`onOpenChange`	Called with the next open state whenever it changes.	`(open: boolean) => void`	-
`open`	Controls the open state. Provide with `onOpenChange` for controlled usage.	`boolean`	-
`...nativeDivProps`	Native props for the root `div`.	`ComponentProps<'div'>`	-

Collapsible.Trigger

Renders the default toggle button, or a custom trigger when children is a function.

Prop	Description	Type	Default
`children`	Trigger label, or a render function that receives `isOpen` and `toggle` for a custom trigger.	`ReactNode \| CollapsibleTriggerRender`	-
`className`	Class names applied to the default trigger button. Ignored when `children` is a function.	`string`	-

Collapsible.Content

Wraps the region that expands and collapses. Accepts the props below plus native props for the div.

Prop	Description	Type	Default
`children`	Content revealed when the collapsible is open.	`ReactNode`	-
`className`	Class names applied to the animated content wrapper.	`string`	-
`defaultOverflowHidden`	Applies `overflow-hidden` so content is clipped during the height animation.	`boolean`	`true`
`...nativeDivProps`	Native props for the content `div`.	`ComponentProps<'div'>`	-

Types

type CollapsibleTriggerRender = (props: {
  isOpen: boolean;
  toggle: () => void;
}) => ReactNode;