Collapsible - shadcn/ui

Installation

npx shadcn@latest add collapsible

yarn dlx shadcn@latest add collapsible

pnpm dlx shadcn@latest add collapsible

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>

Component Code

"use client"

import { Collapsible as CollapsiblePrimitive } from "radix-ui"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Examples

Basic
Controlled
With Animation

A basic collapsible component.

import { useState } from "react"
import { ChevronsUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

function CollapsibleDemo() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <div className="flex items-center justify-between space-x-4">
        <h4 className="text-sm font-semibold">
          @peduarte starred 3 repositories
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">
        @radix-ui/primitives
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          @radix-ui/colors
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          @stitches/react
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Control the open state externally.

import { useState } from "react"

function ControlledCollapsible() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open"}
      </Button>
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CollapsibleTrigger>Click to toggle</CollapsibleTrigger>
        <CollapsibleContent>
          This content is controlled externally.
        </CollapsibleContent>
      </Collapsible>
    </>
  )
}

Add smooth animations with CSS.

<Collapsible>
  <CollapsibleTrigger className="flex w-full items-center justify-between p-4">
    <span>Click to expand</span>
    <ChevronDown className="h-4 w-4 transition-transform duration-200 [data-state=open]:rotate-180" />
  </CollapsibleTrigger>
  <CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden">
    <div className="p-4">
      Content with smooth animation
    </div>
  </CollapsibleContent>
</Collapsible>

Add to your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--radix-collapsible-content-height)" },
        },
        "collapsible-up": {
          from: { height: "var(--radix-collapsible-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "collapsible-down": "collapsible-down 0.2s ease-out",
        "collapsible-up": "collapsible-up 0.2s ease-out",
      },
    },
  },
}

Use Cases

The Collapsible component is useful for:

FAQ sections
Accordion-style content
Expandable lists
Settings panels
Navigation menus
Form sections

API Reference

Collapsible

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-
`disabled`	`boolean`	`false`

CollapsibleTrigger

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	-

CollapsibleContent

Prop	Type	Default
`forceMount`	`boolean`	`false`
`className`	`string`	-

⌘I