Collapsible

free

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@latest add Collapsible

pnpm dlx nateui@latest add Collapsible

yarn dlx nateui@latest add Collapsible

Examples

Basic

This region is expanded on first render and can still be collapsed.

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

export default function BasicDemo() {
  return (

Controlled

Expanded: setup-guide

Install the CLI, scaffold a starter, and connect your first component to a live project.

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

Accordion

Run the add command from the Installation section. The CLI copies the source into your project and installs any required dependencies.

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;