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

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

# CarouselItem

**Type**: component

Individual slide/item component within the carousel Represents a single slide in the carousel that can contain any content. Automatically handles sizing, spacing, and orientation-specific layouts based on the parent carousel configuration. Each slide is a flex item with configurable basis for responsive layouts.

## JSX Usage

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

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

## 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 slide with content
<CarouselItem>
  <div className="p-6 bg-muted rounded-lg">
    <h3 className="text-lg font-semibold">Slide Title</h3>
    <p className="text-muted-foreground">Slide description</p>
  </div>
</CarouselItem>
```
### Example 2
```tsx
// Card-based slide with structured content
<CarouselItem>
  <Card className="h-full">
    <CardHeader>
      <CardTitle>Product Name</CardTitle>
      <CardDescription>Product category</CardDescription>
    </CardHeader>
    <CardContent>
      <img src="product.jpg" alt="Product" className="w-full aspect-square object-cover" />
      <p className="mt-2 text-2xl font-bold">$99.99</p>
    </CardContent>
    <CardFooter>
      <Button className="w-full">Add to Cart</Button>
    </CardFooter>
  </Card>
</CarouselItem>
```
### Example 3
```tsx
// Responsive multi-item carousel
<CarouselItem className="pl-4 basis-full sm:basis-1/2 lg:basis-1/3">
  <div className="aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg p-6 text-white">
    <h4 className="font-semibold">Feature {index + 1}</h4>
    <p className="text-sm opacity-90">Description text</p>
  </div>
</CarouselItem>
```
### Example 4
```tsx
// Auto-sized slides for variable content
<CarouselItem className="basis-auto">
  <Badge variant="secondary" className="text-nowrap px-4 py-2">
    {tag.label}
  </Badge>
</CarouselItem>
```
### Example 5
```tsx
// Image gallery slide with aspect ratio
<CarouselItem className="basis-4/5">
  <div className="relative aspect-video bg-muted rounded-lg overflow-hidden">
    <img
      src={image.src}
      alt={image.alt}
      className="object-cover w-full h-full"
    />
    <div className="absolute inset-0 bg-black/20 flex items-end p-4">
      <h5 className="text-white font-medium">{image.title}</h5>
    </div>
  </div>
</CarouselItem>
```