Collapsible

An interactive component which expands/collapses a panel.

Order #4189

StatusShipped

"use client"

import * as React from "react"

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/collapsible.json

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>

Composition

Use the following composition to build a Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Controlled State

Use the isExpanded and onExpandedChange props to control the state.

import * as React from "react"
 
export function Example() {
  const [open, setOpen] = React.useState(false)
 
  return (
    <Collapsible isExpanded={open} onExpandedChange={setOpen}>
      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
      <CollapsibleContent>Content</CollapsibleContent>
    </Collapsible>
  )
}

Basic

import { ChevronDownIcon } from "@/registry/icons/__lucide__"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

Settings Panel

Use a trigger button to reveal additional settings.

Radius

Set the corner radius of the element.

"use client"

import * as React from "react"

File Tree

Use nested collapsibles to build a file tree.

Explorer

Outline

import { CaretRightIcon, FileIcon, FolderIcon } from "@phosphor-icons/react"

import { Button } from "@/components/ui/button"

RTL

To enable RTL support, see the RTL configuration guide.

الطلب #4189

الحالةتم الشحن

"use client"

import * as React from "react"

API Reference

See the React Aria documentation for more information.

Code Block Color Picker

On This Page

Installation Usage Composition Controlled State Basic Settings Panel File Tree RTL API Reference