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

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

# CollapsibleTrigger

**Type**: component

Interactive trigger element that toggles collapsible content visibility The clickable element that controls the expanded/collapsed state of the associated CollapsibleContent. Built on Radix UI CollapsibleTrigger primitive with automatic ARIA management and keyboard support. Supports the asChild prop for composition with custom button components or other interactive elements. **Key Features:** - Automatic `aria-expanded` state management - Built-in keyboard navigation (Space/Enter) - Flexible composition via `asChild` pattern - Seamless integration with any interactive element

## JSX Usage

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

<CollapsibleTrigger
  asChild={true}
/>
```

## Component Props

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

## Examples

### Example 1
```tsx
// Simple text trigger with default button styling
<CollapsibleTrigger className="font-medium hover:underline">
  Can I use this in my project?
</CollapsibleTrigger>
```
### Example 2
```tsx
// Composed with Button component for consistent styling
<CollapsibleTrigger asChild>
  <Button variant="outline" className="w-full justify-between">
    Advanced Settings
    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
  </Button>
</CollapsibleTrigger>
```
### Example 3
```tsx
// Custom styled trigger with icon animation
<CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
  How does it work?
  <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 data-[state=open]:rotate-180" />
</CollapsibleTrigger>
```
### Example 4
```tsx
// Trigger composed with icon button
<CollapsibleTrigger asChild>
  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">Toggle options</span>
  </Button>
</CollapsibleTrigger>
```
### Example 5
```tsx
// Trigger with custom element using asChild
<CollapsibleTrigger asChild>
  <div
    role="button"
    tabIndex={0}
    className="flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-accent"
  >
    <FolderIcon className="h-4 w-4" />
    <span>Project Files</span>
    <ChevronRight className="h-3 w-3 transition-transform data-[state=open]:rotate-90" />
  </div>
</CollapsibleTrigger>
```