Navigation & disclosure@neumorphism-ui/collapsible

Collapsible

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

@neumorphism-ui/collapsible

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/collapsible

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

import * as React from "react";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

Example

export default function Example() {
  const [expanded, setExpanded] = React.useState(false);
  return (<Collapsible open={expanded} onOpenChange={setExpanded}><CollapsibleTrigger>{"Advanced settings"}<span aria-hidden="true">{expanded ? "−" : "+"}</span></CollapsibleTrigger><CollapsibleContent><div>{"Reveal optional settings without changing the defaults."}</div></CollapsibleContent></Collapsible>);
}

API Reference

Component	Prop	Type	Default	Description
`Collapsible`	`open / defaultOpen`	`boolean`	`—`	Set controlled or initial state.
`CollapsibleTrigger`	`disabled`	`boolean`	`—`	Disable user interaction.
`CollapsibleContent`	`keepMounted`	`boolean`	`—`	Keep the panel mounted while closed.