Skip to content
Appearance
Accent and overlay
Color mode

Collapsible

Content shown and hidden by a single trigger.

Upstream documentation

Examples

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Collapsible
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/collapsible.json'

Usage

A complete example using the installed component and hook paths.

Collapsible usage
"use client";import { Button } from "@/components/ui/button";import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";function CollapsiblePreview() {  return (    <Collapsible className="w-full max-w-72 rounded-lg border p-3">      <CollapsibleTrigger render={<Button variant="outline" size="sm" />}>        Show details      </CollapsibleTrigger>      <CollapsibleContent className="pt-3 text-sm text-muted-foreground">        Additional details appear here.      </CollapsibleContent>    </Collapsible>  );}export default function Demo() {  return <CollapsiblePreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Collapsible

Collapsible props
CollapsiblePrimitive.Root.Props

CollapsibleTrigger

CollapsibleTrigger props
CollapsiblePrimitive.Trigger.Props & { sound?: boolean }
sound
true

CollapsibleContent

CollapsibleContent props
CollapsiblePrimitive.Panel.Props

Source

Registry JSON