@neynar/ui/llm-docs/pagination.llm.md

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

# Pagination

**Type**: component

Pagination navigation component for large datasets A comprehensive pagination component built on shadcn/ui standards that provides intuitive navigation through pages of content. All interactive elements use buttonVariants from the Button component for consistent styling and behavior: - PaginationLink uses "outline" variant when active, "ghost" when inactive - PaginationPrevious/PaginationNext use "ghost" variant by default - All components inherit Button's focus management, hover states, and accessibility Features responsive design, full accessibility compliance, and flexible composition patterns for different use cases. Ideal for data tables, search results, product listings, and any paginated content that needs professional navigation controls.

## JSX Usage

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

<Pagination
  className="value"
  role="value"
  "aria-label"="value"
  id="value"
  tabIndex={0}
>
  {/* Your content here */}
</Pagination>
```

## Component Props

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

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

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

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

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

### tabIndex
- **Type**: `number`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic pagination with numbered pages
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="/products?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/products?page=1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/products?page=2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/products?page=3">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="/products?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```
### Example 2
```tsx
// Complete pagination with ellipsis for large datasets
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="/search?q=react&page=4" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/search?q=react&page=1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/search?q=react&page=4">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/search?q=react&page=5" isActive>5</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/search?q=react&page=6">6</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/search?q=react&page=50">50</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="/search?q=react&page=6" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```
### Example 3
```tsx
// Client-side pagination with state management
function PaginatedResults() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 25;
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            onClick={(e) => {
              e.preventDefault();
              if (currentPage > 1) setCurrentPage(currentPage - 1);
            }}
            className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
            aria-disabled={currentPage === 1}
          />
        </PaginationItem>
        {[1, 2, 3].map((page) => (
          <PaginationItem key={page}>
            <PaginationLink
              href="#"
              isActive={currentPage === page}
              onClick={(e) => {
                e.preventDefault();
                setCurrentPage(page);
              }}
            >
              {page}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext
            href="#"
            onClick={(e) => {
              e.preventDefault();
              if (currentPage < totalPages) setCurrentPage(currentPage + 1);
            }}
            className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
            aria-disabled={currentPage === totalPages}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}
```
### Example 4
```tsx
// Different sizes for various use cases
// Compact pagination for data tables
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="/data?page=1" size="sm">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/data?page=2" size="sm" isActive>2</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
// Large pagination for primary content
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="/articles?page=1" size="lg">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/articles?page=2" size="lg" isActive>2</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```