---
title: Pagination
description: Pagination with page navigation, next and previous links.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/pagination"

templ PaginationDemo() {
	@pagination.Pagination() {
		@pagination.Content() {
			@pagination.Item() {
				@pagination.Previous(pagination.PreviousProps{Href: "#"})
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					1
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {
					2
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					3
				}
			}
			@pagination.Item() {
				@pagination.Ellipsis()
			}
			@pagination.Item() {
				@pagination.Next(pagination.NextProps{Href: "#"})
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add pagination
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="pagination" title="components/pagination/pagination.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/pagination"
```

```templ showLineNumbers
@pagination.Pagination() {
	@pagination.Content() {
		@pagination.Item() {
			@pagination.Previous(pagination.PreviousProps{Href: "#"})
		}
		@pagination.Item() {
			@pagination.Link(pagination.LinkProps{Href: "#"}) {
				1
			}
		}
		@pagination.Item() {
			@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {
				2
			}
		}
		@pagination.Item() {
			@pagination.Ellipsis()
		}
		@pagination.Item() {
			@pagination.Next(pagination.NextProps{Href: "#"})
		}
	}
}
```

## Composition

Use the following composition to build a `Pagination`:

```text
pagination.Pagination
└── pagination.Content
    ├── pagination.Item
    │   └── pagination.Previous
    ├── pagination.Item
    │   └── pagination.Link
    ├── pagination.Item
    │   └── pagination.Ellipsis
    └── pagination.Item
        └── pagination.Next
```

## Simple

A simple pagination with only page numbers.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/pagination"

templ PaginationSimple() {
	@pagination.Pagination() {
		@pagination.Content() {
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					1
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {
					2
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					3
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					4
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{Href: "#"}) {
					5
				}
			}
		}
	}
}
```

## Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/pagination"
	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
)

templ PaginationIconsOnly() {
	<div class="flex items-center justify-between gap-4">
		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Class: "w-fit"}) {
			@field.Label(field.LabelProps{For: "select-rows-per-page"}) {
				Rows per page
			}
			@selectcomp.Select(selectcomp.Props{Value: "25"}) {
				@selectcomp.Trigger(selectcomp.TriggerProps{ID: "select-rows-per-page", Class: "w-20"}) {
					@selectcomp.Value()
				}
				@selectcomp.Content(selectcomp.ContentProps{Align: selectcomp.AlignStart}) {
					@selectcomp.Group() {
						@selectcomp.Item(selectcomp.ItemProps{Value: "10"}) {
							10
						}
						@selectcomp.Item(selectcomp.ItemProps{Value: "25"}) {
							25
						}
						@selectcomp.Item(selectcomp.ItemProps{Value: "50"}) {
							50
						}
						@selectcomp.Item(selectcomp.ItemProps{Value: "100"}) {
							100
						}
					}
				}
			}
		}
		@pagination.Pagination(pagination.Props{Class: "mx-0 w-auto"}) {
			@pagination.Content() {
				@pagination.Item() {
					@pagination.Previous(pagination.PreviousProps{Href: "#"})
				}
				@pagination.Item() {
					@pagination.Next(pagination.NextProps{Href: "#"})
				}
			}
		}
	</div>
}
```

## API Reference

### Pagination

The `Pagination` component is the nav landmark that wraps the page controls.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### PaginationContent

The `pagination.Content` component is the list that holds the items.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### PaginationItem

The `pagination.Item` component wraps a single control.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### PaginationLink

The `pagination.Link` component is a page link, outlined while active.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Href`     | `string` | -       |
| `IsActive` | `bool`   | `false` |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### PaginationPrevious

The `pagination.Previous` component links to the previous page.

| Prop       | Type     | Default    |
| ---------- | -------- | ---------- |
| `Href`     | `string` | -          |
| `Text`    | `string` | `Previous` |
| `Disabled` | `bool`   | `false`    |
| `Class`    | `string` | -          |

### PaginationNext

The `pagination.Next` component links to the next page.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Href`     | `string` | -       |
| `Text`    | `string` | `Next`  |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### PaginationEllipsis

The `pagination.Ellipsis` component marks collapsed pages.

| Prop | Type | Default |
| ---- | ---- | ------- |
| -    | -    | -       |