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

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

# CarouselPrevious

**Type**: component

Navigation button to go to the previous carousel slide Renders a previous navigation button that automatically handles disabled states when at the beginning of the carousel (unless loop is enabled). Supports both horizontal and vertical orientations with appropriate positioning and icon rotation. Integrates with the carousel context to provide seamless navigation.

## JSX Usage

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

<CarouselPrevious
  className="value"
  variant={value}
  size={value}
/>
```

## Component Props

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

### variant
- **Type**: `| "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link"`
- **Required**: No
- **Description**: No description available

### size
- **Type**: `"default" | "sm" | "lg" | "icon"`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic usage with default styling
<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```
### Example 2
```tsx
// Custom positioned button
<CarouselPrevious
  className="-left-8 bg-background shadow-md hover:shadow-lg"
  variant="ghost"
  size="sm"
/>
```
### Example 3
```tsx
// Vertical carousel with rotated icons
<Carousel orientation="vertical" className="h-[400px]">
  <CarouselContent>...</CarouselContent>
  <CarouselPrevious className="-top-8" />
  <CarouselNext className="-bottom-8" />
</Carousel>
```
### Example 4
```tsx
// Inside carousel bounds positioning
<div className="relative">
  <Carousel>
    <CarouselContent>...</CarouselContent>
    <CarouselPrevious className="absolute left-4 top-1/2 -translate-y-1/2 z-10" />
    <CarouselNext className="absolute right-4 top-1/2 -translate-y-1/2 z-10" />
  </Carousel>
</div>
```
### Example 5
```tsx
// Custom button content and accessibility
<CarouselPrevious
  variant="secondary"
  className="w-auto px-4"
  aria-label="Go to previous product"
>
  <ArrowLeft className="w-4 h-4 mr-2" />
  Previous
</CarouselPrevious>
```