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

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

# useCarousel

**Type**: hook

Hook to access carousel context and controls Must be used within a Carousel component. Provides access to the carousel API and navigation methods for building custom carousel interactions.

## API Surface

```typescript
import { useCarousel } from '@neynar/ui';

export function useCarousel(): ReturnType<typeof useCarousel> { ... }
```

## Returns

**Return Type**: `ReturnType<typeof useCarousel>`


**Description**: Carousel context containing API, navigation controls, and state
## Usage

```typescript
import { useCarousel } from '@neynar/ui';

const result = useCarousel();
```

## Examples

```tsx
function CarouselDots() {
  const { api, scrollNext, canScrollNext } = useCarousel();
  const [current, setCurrent] = useState(0);
  useEffect(() => {
    if (!api) return;
    setCurrent(api.selectedScrollSnap());
    api.on('select', () => setCurrent(api.selectedScrollSnap()));
  }, [api]);
  return (
    <div className="flex gap-2">
      {Array.from({ length: 5 }).map((_, i) => (
        <button
          key={i}
          className={current === i ? "active" : ""}
          onClick={() => api?.scrollTo(i)}
        />
      ))}
    </div>
  );
}
```
## Throws

- Error when used outside of Carousel component