# Pagination
```astro --- import { Pagination, PaginationEllipsis, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/starwind/pagination"; --- Prev 1 2 3 Next ```
```tsx import { Pagination, PaginationEllipsis, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/starwind/pagination"; export function Example() { return ( <> Prev 1 2 3 Next ); } ```
```vue ```
## Installation ```bash npx starwind@latest add pagination --framework astro ``` ```bash npx starwind@latest add pagination --framework react ``` ```bash npx starwind@latest add pagination --framework vue ``` ## Usage
```astro --- import { Pagination, PaginationEllipsis, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/starwind/pagination"; --- Prev 1 2 3 Next ```
```tsx import { Pagination, PaginationEllipsis, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/starwind/pagination"; export function Example() { return ( <> Prev 1 2 3 Next ); } ```
```vue ```
## Composition Place each control inside a `PaginationItem`: ```text Pagination └── PaginationContent ├── PaginationItem │ └── PaginationPrevious ├── PaginationItem │ └── PaginationLink ├── PaginationItem │ └── PaginationEllipsis └── PaginationItem └── PaginationNext ``` ## Active Page The basic pagination component includes previous/next buttons and numbered pages. > **Tip:** Use the `isActive` prop on `` to highlight the current page. ## Sizes `PaginationLink`, `PaginationPrevious`, and `PaginationNext` accept the Button component's `size` values. `PaginationLink` defaults to `size="icon"`. `PaginationPrevious` and `PaginationNext` default to `size="md"` so their text labels receive standard button spacing. `PaginationEllipsis` accepts the icon size values and defaults to `size="icon"`. Use `icon-sm`, `icon`, or `icon-lg` for page links and ellipses. Use `sm`, `md`, or `lg` for previous and next controls. Button supplies the spacing, text size, and icon size for each control.
```astro --- import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis, } from "@/components/starwind/pagination"; ---
Prev 1 2 3 Next
Prev 1 2 3 Next
```
```tsx import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis, } from "@/components/starwind/pagination"; export function Example() { return ( <>
Prev 1 2 3 Next
Prev 1 2 3 Next
); } ```
```vue ```
## Size migration | Before | After | | --- | --- | | `` | `` | | `` | `` | ## API Reference ### Pagination - Inherits nav attributes. ### PaginationContent - Inherits ul attributes. ### PaginationItem - Inherits li attributes. ### PaginationLink | Prop | Type | Required | Default | Kind | Description | | --- | --- | --- | --- | --- | --- | | `isActive` | `boolean` | No | - | Wrapper prop | Applies the active visual state. | | `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | No | `"icon"` | Styled variant | Selects the component's visual size. | - Inherits Button props. Omits `as`, `ref`, and `variant`. ### PaginationPrevious | Prop | Type | Required | Default | Kind | Description | | --- | --- | --- | --- | --- | --- | | `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | No | `"md"` | Styled variant | Selects the component's visual size. | - Inherits PaginationLink props. ### PaginationNext | Prop | Type | Required | Default | Kind | Description | | --- | --- | --- | --- | --- | --- | | `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | No | `"md"` | Styled variant | Selects the component's visual size. | - Inherits PaginationLink props. ### PaginationEllipsis | Prop | Type | Required | Default | Kind | Description | | --- | --- | --- | --- | --- | --- | | `size` | `"icon-sm" \| "icon" \| "icon-lg"` | No | `"icon"` | Styled variant | Selects the component's visual size. | - Inherits span attributes. ## Changelog ### v5.0.0 - Moved size control from `Pagination` to each link, navigation control, and ellipsis. - Set `PaginationLink` and `PaginationEllipsis` to `size="icon"` by default. - Set `PaginationPrevious` and `PaginationNext` to `size="md"` by default so text labels use standard button spacing. - Removed the hover movement from the previous and next icons. Button now supplies their icon size. ### v4.0.1 - Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly. ### v4.0.0 - Moved `size` ownership to `Pagination`; remove `size` from `PaginationLink`, `PaginationPrevious`, `PaginationNext`, and `PaginationEllipsis`. - Migration: `` becomes ``. ### v3.1.0 - Added contract-generated Astro and React implementations while preserving the component's existing public API and styling. ### v3.0.4 - Refactor tailwind variants functions into separate `variants.ts` file ### v3.0.2 - add size prop to `PaginationEllipsis` - Adjust `PaginationNext` and `PaginationPrevious` to use button variant props for sizes ### v3.0.1 - Add named slot "icon" to `PaginationEllipsis` to enable easy icon swapping, and a default slot for the `sr-only` label - Add named slot "icon" to `PaginationNext` and `Pagination Previous` to enable easy icon swapping ### v3.0.0 - Now requires the starwind button component installed to make use of the button variants for `PaginationLink` ### v2.1.0 - Add `data-slot` attribute to enable global styling updates ### v2.0.1 - Add eslint comments to disable "no-explicit-any" when using Astro special syntax to require a child element ### v2.0.0 - `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts. - Removed `radius` prop now that classes like "rounded-full" can be passed to the components to override, taking advantage of `tailwind-variants`