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

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

# PaginationEllipsis

**Type**: component

Visual indicator for omitted page numbers Displays a horizontal ellipsis (MoreHorizontalIcon from Lucide React) to indicate that page numbers have been omitted from the pagination display. Used to maintain clean UI when dealing with large page ranges without overwhelming users. The component is sized consistently with PaginationLink components (36px × 36px) to maintain visual harmony in the pagination layout. Includes accessible hidden text for screen readers while keeping the visual element hidden from assistive technology to avoid confusion.

## JSX Usage

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

<PaginationEllipsis
  className="value"
  "aria-hidden"={true}
  id="value"
  tabIndex={0}
  title="value"
  "aria-label"="value"
/>
```

## Component Props

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

### "aria-hidden"
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

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

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

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

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

## Examples

### Example 1
```tsx
// Between page ranges
<PaginationItem>
  <PaginationLink href="/page/1">1</PaginationLink>
</PaginationItem>
<PaginationItem>
  <PaginationEllipsis />
</PaginationItem>
<PaginationItem>
  <PaginationLink href="/page/25" isActive>25</PaginationLink>
</PaginationItem>
```
### Example 2
```tsx
// Common pagination pattern with ellipsis
// Layout: 1 ... 23 24 [25] 26 27 ... 100
<PaginationContent>
  <PaginationItem>
    <PaginationLink href="/page/1">1</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/23">23</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/24">24</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/25" isActive>25</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/26">26</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/27">27</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="/page/100">100</PaginationLink>
  </PaginationItem>
</PaginationContent>
```
### Example 3
```tsx
// With custom styling for different themes
<PaginationEllipsis className="text-muted-foreground/60" />
```