This is the llms.txt documentation for the "paginations" directory of the Origin UI - Svelte project.
# "paginations" directory
> A collection of production-ready, accessible UI components built with Svelte 5 and Tailwind CSS. These components are designed to be drop-in solutions for rapidly building modern web applications.
This documentation covers 12 components, each following best practices for accessibility, performance, and type safety.
## Components
## pagination-01
> A type-safe, accessible pagination-01 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-01`
- **Location**: `/src/lib/components/paginations/pagination-01.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-01.svelte)
## pagination-02
> A type-safe, accessible pagination-02 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-02`
- **Location**: `/src/lib/components/paginations/pagination-02.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-02.svelte)
## pagination-03
> A type-safe, accessible pagination-03 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-03`
- **Location**: `/src/lib/components/paginations/pagination-03.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Page {currentPage} of
{totalPages}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-03.svelte)
## pagination-04
> A type-safe, accessible pagination-04 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-04`
- **Location**: `/src/lib/components/paginations/pagination-04.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
Page {currentPage} of
{totalPages}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-04.svelte)
## pagination-05
> A type-safe, accessible pagination-05 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-05`
- **Location**: `/src/lib/components/paginations/pagination-05.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
Page {currentPage} of
{totalPages}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-05.svelte)
## pagination-06
> A type-safe, accessible pagination-06 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-06`
- **Location**: `/src/lib/components/paginations/pagination-06.svelte`
- **Type**: UI Component
### Usage
```svelte
Full component implementation:
```svelte
{#if pagination.showLeftEllipsis}
{/if}
{#each pagination.pages as page (page)}
{page}
{/each}
{#if pagination.showRightEllipsis}
{/if}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-06.svelte)
## pagination-07
> A type-safe, accessible pagination-07 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-07`
- **Location**: `/src/lib/components/paginations/pagination-07.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
{#if pagination.showLeftEllipsis}
{/if}
{#each pagination.pages as page (page)}
{page}
{/each}
{#if pagination.showRightEllipsis}
{/if}
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-07.svelte)
## pagination-08
> A type-safe, accessible pagination-08 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-08`
- **Location**: `/src/lib/components/paginations/pagination-08.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
svg]:opacity-50'
)}
href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}
aria-label="Go to previous page"
aria-disabled={currentPage === 1 ? true : undefined}
role={currentPage === 1 ? 'link' : undefined}
>
{#if pagination.showLeftEllipsis}
{/if}
{#each pagination.pages as page (page)}
{page}
{/each}
{#if pagination.showRightEllipsis}
{/if}
svg]:opacity-50'
)}
href={currentPage === totalPages ? undefined : `#/page/${currentPage + 1}`}
aria-label="Go to next page"
aria-disabled={currentPage === totalPages ? true : undefined}
role={currentPage === totalPages ? 'link' : undefined}
>
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-08.svelte)
## pagination-09
> A type-safe, accessible pagination-09 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-09`
- **Location**: `/src/lib/components/paginations/pagination-09.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-09.svelte)
## pagination-10
> A type-safe, accessible pagination-10 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-10`
- **Location**: `/src/lib/components/paginations/pagination-10.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
1-10 of
100
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-10.svelte)
## pagination-11
> A type-safe, accessible pagination-11 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-11`
- **Location**: `/src/lib/components/paginations/pagination-11.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte
```
### Links
- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/paginations/pagination-11.svelte)
## pagination-12
> A type-safe, accessible pagination-12 component for building modern UIs. This component is part of the paginations collection.
### Core Information
- **Component ID**: `pagination-12`
- **Location**: `/src/lib/components/paginations/pagination-12.svelte`
- **Type**: UI Component
### Usage
```svelte
### Dependencies
Required packages and components:
- [`lucide-svelte`](https://github.com/lucide-icons/lucide)
Full component implementation:
```svelte