@neynar/ui/llm-docs/collapsible.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Collapsible

**Type**: component

An interactive component which expands/collapses a panel A flexible container component built on Radix UI Collapsible primitives that allows users to toggle the visibility of content sections. Unlike Accordion, Collapsible provides more flexibility without enforcing specific visual structures or mutual exclusivity. Perfect for FAQ sections, expandable details, settings panels, sidebar navigation, and any content that should be conditionally visible. Built on `@radix-ui/react-collapsible` with enhanced TypeScript support and comprehensive prop documentation.

## JSX Usage

```jsx
import { Collapsible } from '@neynar/ui';

<Collapsible
  asChild={true}
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
  disabled={true}
/>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### defaultOpen
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic controlled collapsible with state management
const [isOpen, setIsOpen] = React.useState(false)
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <CollapsibleTrigger asChild>
    <Button variant="outline" className="w-full justify-between">
      Can I use this in my project?
      <ChevronDown className={cn(
        "h-4 w-4 transition-transform duration-200",
        isOpen && "rotate-180"
      )} />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
    <div className="p-4 border rounded-md bg-muted/50 mt-2">
      Yes. Free to use for personal and commercial projects.
      No attribution required.
    </div>
  </CollapsibleContent>
</Collapsible>
```
### Example 2
```tsx
// Uncontrolled collapsible with default state
<Collapsible defaultOpen={true} className="w-full space-y-2">
  <div className="flex items-center justify-between">
    <h4 className="text-sm font-semibold">
### Example 3
```tsx
// FAQ-style implementation with custom animations
<Collapsible className="group" data-orientation="vertical">
  <CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
    How do I get started?
    <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
  </CollapsibleTrigger>
  <CollapsibleContent className="overflow-hidden text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
    <div className="pb-4 pt-0">
      Getting started is easy! Simply follow our quick setup guide,
      install the required dependencies, and begin building your application.
      Check out our documentation for detailed instructions.
    </div>
  </CollapsibleContent>
</Collapsible>
```
### Example 4
```tsx
// Disabled collapsible state
<Collapsible disabled className="opacity-50 cursor-not-allowed">
  <CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-sm font-medium">
    This section is temporarily unavailable
    <ChevronDown className="h-4 w-4" />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="pb-4 pt-0 text-sm text-muted-foreground">
      This content is currently disabled and cannot be accessed.
    </div>
  </CollapsibleContent>
</Collapsible>
```