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

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

# CarouselContent

**Type**: component

Container component for carousel items that handles the scrolling viewport Wraps all carousel items and manages the scrollable area. This component must be a direct child of Carousel and handles orientation-specific layouts, overflow behavior, and slide spacing. The outer div provides overflow clipping while the inner div contains the flex layout for slides.

## JSX Usage

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

<CarouselContent
  className="value"
>
  {/* Your content here */}
</CarouselContent>
```

## Component Props

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

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

## Examples

### Example 1
```tsx
// Basic usage
<CarouselContent>
  <CarouselItem>Slide 1</CarouselItem>
  <CarouselItem>Slide 2</CarouselItem>
  <CarouselItem>Slide 3</CarouselItem>
</CarouselContent>
```
### Example 2
```tsx
// Multi-item carousel with responsive spacing
<CarouselContent className="-ml-2 md:-ml-4">
  <CarouselItem className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3">
    <Card>Product 1</Card>
  </CarouselItem>
  <CarouselItem className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3">
    <Card>Product 2</Card>
  </CarouselItem>
</CarouselContent>
```
### Example 3
```tsx
// Vertical orientation with custom height
<CarouselContent className="-mt-4 h-[300px]">
  <CarouselItem className="pt-4 basis-1/2">
    <div className="h-full bg-muted rounded-lg">Slide 1</div>
  </CarouselItem>
  <CarouselItem className="pt-4 basis-1/2">
    <div className="h-full bg-muted rounded-lg">Slide 2</div>
  </CarouselItem>
</CarouselContent>
```
### Example 4
```tsx
// Custom slide spacing with CSS variables
<CarouselContent
  className="-ml-4"
  style={{ '--slide-spacing': '1rem' } as React.CSSProperties}
>
  <CarouselItem className="pl-4">
    Content with custom spacing
  </CarouselItem>
</CarouselContent>
```