Neumorphism UI

Collapsible

Use Collapsible to reveal one independent group of optional details or advanced settings.

Preview

Additional settings

Toggle a controlled details section without changing the surrounding content.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/collapsible

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Pair CollapsibleTrigger and CollapsibleContent within Collapsible. Use open and onOpenChange when application state needs to follow expansion.

"use client";

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

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
      <CollapsibleContent><div>Optional project settings go here.</div></CollapsibleContent>
    </Collapsible>
  );
}

API Reference

Reveal or hide one group of optional settings. Name the trigger for its content. Check expansion with Enter and Space.

ComponentPropTypeDefaultDescription
Collapsibleopen / defaultOpenboolean—Set controlled or initial state.
CollapsibleTriggerdisabledboolean—Disable user interaction.
CollapsibleContentkeepMountedboolean—Keep the panel mounted while closed.

Accessibility

  • 01

    Name the trigger for its content. Check expansion with Enter and Space.

  • 02

    Preserve labels and visible focus when customizing render or className.