Creative Tim UICreative Tim UI

Shadcn Collapse

PreviousNext

A component that allows content to be collapsed and expanded, perfect for creating collapsible sections, menus, and accordion-like interfaces.

  • Components
"use client"

import * as React from "react"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { Collapse, CollapseContent } from "@/components/ui/collapse"
import { List, ListItem, ListItemEnd } from "@/components/ui/list"

export function CollapseDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <List>
      <ListItem
        onClick={() => setIsOpen((cur) => !cur)}
        className="cursor-pointer"
      >
        Components
        <ListItemEnd>
          <ChevronDown
            className={cn(
              "h-5 w-5 transition-transform duration-200",
              isOpen && "rotate-180"
            )}
          />
        </ListItemEnd>
      </ListItem>
      <Collapse open={isOpen}>
        <CollapseContent>
          <List>
            <ListItem>Avatar</ListItem>
            <ListItem>Button</ListItem>
            <ListItem>Input</ListItem>
            <ListItem>Checkbox</ListItem>
            <ListItem>Select</ListItem>
          </List>
        </CollapseContent>
      </Collapse>
    </List>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add collapse

Usage

import CollapseDemo from "@/components/collapse-demo"
<CollapseDemo />

Best Practices

  • Use collapse components to hide and show content progressively
  • Provide clear visual indicators (like chevron icons) for expandable sections
  • Use smooth animations to enhance user experience
  • Consider accessibility by ensuring keyboard navigation works properly
  • Use collapse for navigation menus, FAQ sections, and content organization
  • Keep collapsed content concise and relevant
  • Provide clear labels for collapsible sections

Collapse components provide a clean way to manage content visibility while maintaining a compact interface. They're ideal for navigation menus, FAQ sections, settings panels, and any interface where progressive disclosure improves user experience.