Shadcn Collapsible

React collapsible component for expanding and collapsing content with smooth animations. Built with TypeScript and Tailwind CSS for Next.js applications.

Collapsible animation jerky?

Join our Discord community for help from other developers.

Ever built a FAQ section where clicking "Show Answer" just... doesn't work half the time? Or watched users get lost because they can't find content that's hidden behind vague "More Details" links? Yeah, collapsibles can either elegantly organize content or become information black holes. This shadcn/ui collapsible actually expands when clicked.

Collapsible showcase

Progressive disclosure that doesn't hide your content:

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's Collapsible primitive with smooth animations and TypeScript types. Styled with Tailwind CSS so it matches your design system instead of looking like an accordion from 2005.

npx shadcn@latest add collapsible

Why collapsibles actually organize information

Here's the thing—collapsibles aren't just fancy show/hide buttons. They're information architecture tools that help users scan content quickly without overwhelming them. Done wrong, they hide important stuff users need to find. Done right, they let users choose their own level of detail.

Think about GitHub's file tree or mobile navigation menus. Users can expand what they need and keep everything else collapsed. No endless scrolling through irrelevant sections, no cognitive overload from too much visible content at once.

This free shadcn collapsible handles the complex parts—smooth animations, keyboard navigation, accessibility—while you focus on content organization. Whether you're building FAQ sections, navigation trees, or settings panels in your JavaScript apps, collapsibles that respond predictably keep users in control.

Common collapsible patterns you'll actually use

FAQ sections

The classic question-and-answer pattern:

Loading component...

Controlled state

When you need programmatic control:

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

File trees and navigation 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 together:

Loading component...

Features

This free open source collapsible component includes everything you need:

TypeScript-first - Full type safety with proper state management
Radix UI powered - Battle-tested accessibility and keyboard navigation
Smooth animations - CSS transitions that don't feel janky
Tailwind CSS styled - Customize with utilities, not fighting framework CSS
Keyboard accessible - Space and Enter keys work as expected
Screen reader friendly - Proper ARIA attributes and state announcements
Flexible composition - Mix triggers and content however you need
State management - Controlled and uncontrolled modes supported

API Reference

Core Components

Component	Purpose	Key Props
`Collapsible`	Root container	`open`, `defaultOpen`, `onOpenChange`
`CollapsibleTrigger`	Click target	`asChild` for custom elements
`CollapsibleContent`	Hidden/shown content	`forceMount` for special cases

State Management

Pattern	Props	Use Case
Uncontrolled	`defaultOpen`	Simple FAQ sections
Controlled	`open`, `onOpenChange`	Complex state management
Disabled	`disabled`	Non-interactive display

Key	Action
`Space`	Toggle open/closed
`Enter`	Toggle open/closed
`Tab`	Move to next focusable element

Production tips

Make triggers obvious. This free shadcn/ui collapsible works great, but users need to know what's clickable. Add chevron icons, "Show more" text, or visual hover states. Your React component handles the functionality—you handle the discoverability.

Start with logical defaults. FAQ sections should start collapsed so users can scan questions quickly. Navigation menus might start expanded on desktop but collapsed on mobile. This TypeScript component supports both patterns—choose based on user needs, not developer convenience.

Keep content focused. Each collapsible should contain related information about one topic. Don't stuff your entire privacy policy into one giant collapsible. Users need to find specific information quickly in your Next.js app.

Test with real content. Those neat collapsibles with "Lorem ipsum" look great in demos. Then you add real FAQ answers that are 500 words each and suddenly the animations feel sluggish. This open source shadcn component is efficient, but test with production content lengths.

Consider mobile carefully. Nested collapsibles can get confusing on small screens. Users lose track of where they are in deep hierarchies. Limit nesting levels or provide breadcrumb-style navigation for complex trees in your JavaScript applications.

Integration with other components

Collapsibles work naturally with Card components to create expandable sections in your React applications. The card provides visual boundaries while the collapsible manages content visibility.

For navigation, combine collapsibles with Button components as triggers, using icons from your icon library. This open source pattern works well for sidebar navigation and mobile menus.

In FAQ sections, pair collapsibles with Separator components to visually group related questions. When building forms, use collapsibles with Form components to create progressive disclosure of advanced options. Your JavaScript components stay organized while providing natural information hierarchy.

Shadcn Collapsible

Collapsible showcase

Why collapsibles actually organize information

Common collapsible patterns you'll actually use

FAQ sections

Controlled state

Nested hierarchical content

Multiple sections

Features

API Reference

Core Components

State Management

Keyboard Navigation

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Collapsible

Reactbutton

Reactcollapsible

Reactcollapsible

Reactbutton

Reactcollapsible

Reactcollapsible

Reactcollapsible

What's the difference between Collapsible and Accordion?

Can I customize the expand/collapse animations?

Are collapsibles accessible to screen readers?

Does collapsed content hurt SEO?

Do lots of collapsibles impact performance?

How do collapsibles work on mobile?

Can I save collapsible state between page loads?

How deep should I nest collapsibles?

On this page