<!-- source-hash: 81d02993dbe561b42733bf91b8d62a0e -->
A React accordion component built on top of Radix UI primitives with custom styling and animations. This provides a fully accessible, keyboard-navigable accordion interface with smooth expand/collapse animations.

## Key Components

- **`Accordion`** - Root container component (alias for `AccordionPrimitive.Root`)
- **`AccordionItem`** - Individual accordion item wrapper with border styling
- **`AccordionTrigger`** - Clickable header with chevron icon that rotates on expand
- **`AccordionContent`** - Collapsible content area with custom accordion animations

## Usage Example

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

export function FAQSection() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is your return policy?</AccordionTrigger>
        <AccordionContent>
          We offer a 30-day return policy for all items in original condition.
        </AccordionContent>
      </AccordionItem>
      
      <AccordionItem value="item-2">
        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
        <AccordionContent>
          Standard shipping takes 3-5 business days within the US.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

The component includes built-in hover effects, smooth animations via CSS custom properties (`animate-accordion-up/down`), and automatic chevron rotation when items expand or collapse.