Collapsible

<ComponentPreview styleName="radix-nova" name="collapsible-demo" align="start" />

Installation

npx shadcn@latest add collapsible

<Step>Install the following dependencies:</Step>

npm install radix-ui

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="collapsible" title="components/ui/collapsible.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Controlled State

Use the open and onOpenChange props to control the state.

import * as React from "react"

export function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  )
}

Examples

Basic

<ComponentPreview styleName="radix-nova" name="collapsible-basic" align="start" />

Settings Panel

Use a trigger button to reveal additional settings.

File Tree

Use nested collapsibles to build a file tree.

<ComponentPreview styleName="radix-nova" name="collapsible-file-tree" previewClassName="h-[36rem]" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="collapsible-rtl" direction="rtl" align="start" />

API Reference

See the Radix UI documentation for more information.