<!-- source-hash: 6175e53d66a2c2110ac66cf1918700bc -->
A customizable accordion component built on Radix UI primitives with styled triggers, animated content transitions, and automatic chevron rotation indicators.

## Key Components

- **`Accordion`** - Root container component (direct export of `AccordionPrimitive.Root`)
- **`AccordionItem`** - Individual accordion item wrapper with bottom border styling
- **`AccordionTrigger`** - Clickable header with chevron icon that rotates on open/close
- **`AccordionContent`** - Collapsible content area with smooth slide animations

## Usage Example

```typescript
import { 
  Accordion, 
  AccordionItem, 
  AccordionTrigger, 
  AccordionContent 
} from "./components/accordion"

export function FAQ() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is this component?</AccordionTrigger>
        <AccordionContent>
          A reusable accordion built with Radix UI primitives and Tailwind CSS.
        </AccordionContent>
      </AccordionItem>
      
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I customize it?</AccordionTrigger>
        <AccordionContent>
          Pass custom className props to override default styles.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

The component includes hover effects, smooth animations (`accordion-up`/`accordion-down`), and automatically rotates the chevron icon when expanded. All components are properly typed with React.forwardRef for ref forwarding.