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

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

# Accordion

**Type**: component

Accordion - Collapsible content panels for organizing information A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI Accordion primitives with optimized animations and accessibility. Supports both single and multiple expanded items simultaneously based on the type prop.

## JSX Usage

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

<Accordion
  disabled={true}
  orientation={value}
  dir={value}
  className="value"
>
  {/* Your content here */}
</Accordion>
```

## Component Props

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

### orientation
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: No description available

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic single accordion (only one item can be open)
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```
### Example 2
```tsx
// Multiple accordion (multiple items can be open)
<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>
```
### Example 3
```tsx
// FAQ-style accordion with default open state
<Accordion type="single" collapsible defaultValue="faq-1">
  <AccordionItem value="faq-1">
    <AccordionTrigger>How do I get started?</AccordionTrigger>
    <AccordionContent>
      Follow our quick start guide to set up your first project.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```