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

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

# CollapsibleContent

**Type**: component

Content container that can be expanded or collapsed The panel containing content that is shown or hidden based on the collapsible state. Built on Radix UI CollapsibleContent primitive with automatic height animations, accessibility attributes, and smooth transitions when toggling between expanded and collapsed states. **Key Features:** - Automatic height animations using CSS variables - Proper accessibility tree management (hidden when collapsed) - CSS data attributes for custom styling and animations - Support for forceMount to keep content in DOM when collapsed - Seamless composition via asChild pattern

## JSX Usage

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

<CollapsibleContent
  asChild={true}
  forceMount={true}
/>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, merges props onto immediate child instead of rendering div

### forceMount
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, forces content to stay in DOM even when collapsed

## Examples

### Example 1
```tsx
// Basic content panel with simple styling
<CollapsibleContent className="pt-2">
  <div className="rounded-md border px-4 py-2 text-sm bg-muted/50">
    Yes. Free to use for personal and commercial projects.
    No attribution required.
  </div>
</CollapsibleContent>
```
### Example 2
```tsx
// Content with multiple elements and spacing
<CollapsibleContent className="space-y-2 pt-2">
  <div className="rounded-md border px-4 py-3 font-mono text-sm shadow-sm">
### Example 3
```tsx
// Content with custom animations using CSS variables
<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 px-1">
    Content with smooth height animations. The CSS variables
    --radix-collapsible-content-height and --radix-collapsible-content-width
    are available for custom animation implementations.
  </div>
</CollapsibleContent>
```
### Example 4
```tsx
// Force mounted content (stays in DOM when collapsed)
<CollapsibleContent forceMount className="data-[state=closed]:hidden">
  <div className="p-4 text-sm">
    This content remains in the DOM even when collapsed,
    useful for maintaining form state or for SSR consistency.
  </div>
</CollapsibleContent>
```
### Example 5
```tsx
// Content with asChild composition
<CollapsibleContent asChild>
  <motion.div
    initial={{ height: 0 }}
    animate={{ height: "auto" }}
    exit={{ height: 0 }}
    className="overflow-hidden"
  >
    <div className="p-4">
      Content with custom Framer Motion animations
    </div>
  </motion.div>
</CollapsibleContent>
```
### Example 6
```tsx
// Content with complex nested structure
<CollapsibleContent className="overflow-hidden">
  <div className="border-t pt-4 mt-2">
    <div className="grid grid-cols-2 gap-4">
      <div className="space-y-2">
        <h4 className="font-medium">Documentation</h4>
        <ul className="text-sm space-y-1 text-muted-foreground">
          <li>Getting Started</li>
          <li>Installation</li>
          <li>Configuration</li>
        </ul>
      </div>
      <div className="space-y-2">
        <h4 className="font-medium">Examples</h4>
        <ul className="text-sm space-y-1 text-muted-foreground">
          <li>Basic Usage</li>
          <li>Advanced Patterns</li>
          <li>Custom Styling</li>
        </ul>
      </div>
    </div>
  </div>
</CollapsibleContent>
```