Collapsible

React collapsible component with smooth animations and keyboard navigation. Perfect for FAQs, navigation menus, and content sections that need to expand and collapse.

Need to save space but keep content accessible? Users expect to click and reveal more information without navigating away. Collapsible components work great for FAQs, navigation menus, and any content that benefits from progressive disclosure.

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Built on Radix UI Collapsible with smooth animations and full accessibility support.

npx shadcn@latest add collapsible

Collapsible patterns that users recognize

FAQ and help sections

The most common pattern - questions that expand to show answers:

Loading component...

Controlled state management

When you need to manage the open/closed state externally:

Loading component...

"use client"import * as React from "react"import { ChevronDown } from "lucide-react"import { Button } from "@/components/ui/button"import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/ui/collapsible"export default function CollapsibleControlled() {  const [isOpen, setIsOpen] = React.useState(false)  return (    <div className="w-full p-6 flex justify-center">      <div className="w-[350px] space-y-4">        <div className="flex items-center gap-2">          <span className="text-sm text-muted-foreground">            Status: {isOpen ? "Open" : "Closed"}          </span>          <Button             variant="outline"             size="sm"            onClick={() => setIsOpen(!isOpen)}          >            {isOpen ? "Close" : "Open"} Externally          </Button>        </div>        <Collapsible          open={isOpen}          onOpenChange={setIsOpen}          className="space-y-2"        >          <CollapsibleTrigger asChild>            <Button               variant="ghost"               className="flex w-full justify-between p-4 h-auto font-normal"            >              <span>Advanced Settings</span>              <ChevronDown                 className={`h-4 w-4 transition-transform duration-200 ${                  isOpen ? "transform rotate-180" : ""                }`}               />            </Button>          </CollapsibleTrigger>          <CollapsibleContent className="space-y-2">            <div className="rounded-md border p-4 space-y-3">              <div className="flex items-center justify-between">                <label className="text-sm font-medium">Auto-save</label>                <input type="checkbox" defaultChecked />              </div>              <div className="flex items-center justify-between">                <label className="text-sm font-medium">Dark mode</label>                <input type="checkbox" />              </div>              <div className="flex items-center justify-between">                <label className="text-sm font-medium">Notifications</label>                <input type="checkbox" defaultChecked />              </div>            </div>          </CollapsibleContent>        </Collapsible>      </div>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Nested hierarchical content

Perfect for file trees, navigation menus, and organizational structures:

Loading component...

"use client"import * as React from "react"import { ChevronRight, Folder, File } from "lucide-react"import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/ui/collapsible"export default function CollapsibleNested() {  return (    <div className="w-full p-6 flex justify-center">      <div className="w-[350px] space-y-1">        <Collapsible className="group">          <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent text-left">            <ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />            <Folder className="h-4 w-4" />            <span className="text-sm font-medium">src</span>          </CollapsibleTrigger>          <CollapsibleContent className="ml-6 space-y-1">            <Collapsible className="group">              <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent text-left">                <ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />                <Folder className="h-4 w-4" />                <span className="text-sm">components</span>              </CollapsibleTrigger>              <CollapsibleContent className="ml-6 space-y-1">                <div className="flex items-center gap-2 rounded-md p-2 hover:bg-accent">                  <File className="h-4 w-4 ml-4" />                  <span className="text-sm">Button.tsx</span>                </div>                <div className="flex items-center gap-2 rounded-md p-2 hover:bg-accent">                  <File className="h-4 w-4 ml-4" />                  <span className="text-sm">Input.tsx</span>                </div>              </CollapsibleContent>            </Collapsible>                        <Collapsible className="group">              <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md p-2 hover:bg-accent text-left">                <ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />                <Folder className="h-4 w-4" />                <span className="text-sm">utils</span>              </CollapsibleTrigger>              <CollapsibleContent className="ml-6 space-y-1">                <div className="flex items-center gap-2 rounded-md p-2 hover:bg-accent">                  <File className="h-4 w-4 ml-4" />                  <span className="text-sm">cn.ts</span>                </div>              </CollapsibleContent>            </Collapsible>                        <div className="flex items-center gap-2 rounded-md p-2 hover:bg-accent">              <File className="h-4 w-4 ml-4" />              <span className="text-sm">index.ts</span>            </div>          </CollapsibleContent>        </Collapsible>                <div className="flex items-center gap-2 rounded-md p-2 hover:bg-accent">          <File className="h-4 w-4 ml-4" />          <span className="text-sm">package.json</span>        </div>      </div>    </div>  )}

Multiple sections

Group related collapsibles for better organization:

Loading component...

API Reference

Contains all the parts of a collapsible. Root container that manages the open/closed state.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	The open state of the collapsible when initially rendered
`open`	`boolean`	-	The controlled open state of the collapsible
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the collapsible
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

CollapsibleTrigger

The button that toggles the collapsible.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

CollapsibleContent

The component that contains the collapsible content.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child
`forceMount`	`boolean`	`false`	Used to force mounting when more control is needed

Key	Description
`Space`	Opens/closes the collapsible
`Enter`	Opens/closes the collapsible

Collapsible best practices

What makes collapsibles feel natural and accessible:

Use clear trigger text - "Shipping Information" instead of vague "More Details"
Add visual indicators - Chevron icons that rotate to show state changes
Keep content focused - Each collapsible should cover one topic or section
Start with logical defaults - FAQ sections often start collapsed, navigation menus often start open
Smooth animations matter - Users notice jarring expand/collapse transitions
Group related content - Multiple collapsibles work well for organizing information
Test keyboard navigation - Space, Enter, and Tab should all work properly
Don't nest too deeply - More than 2-3 levels gets confusing fast

Collapsible

Collapsible patterns that users recognize

FAQ and help sections

Controlled state management

Nested hierarchical content

Multiple sections

API Reference

Collapsible

CollapsibleTrigger

CollapsibleContent

Keyboard Navigation

Collapsible best practices

On this page

Collapsible

Reactbutton

Reactcollapsible

Reactcollapsible

Reactbutton

Reactcollapsible

Reactcollapsible

Reactcollapsible

On this page