Pagination

Pagination with page navigation, next and previous links.

1
import {
2
  Pagination,
3
  PaginationContent,
4
  PaginationEllipsis,
5
  PaginationItem,
6
  PaginationLink,
7
  PaginationNext,
8
  PaginationPrevious,
9
} from "~/components/ui/pagination";
10

11
export default function PaginationDemo() {
12
  return (
13
    <Pagination>
14
      <PaginationContent>
15
        <PaginationItem>
16
          <PaginationPrevious href="#" />
17
        </PaginationItem>
18
        <PaginationItem>
19
          <PaginationLink href="#">1</PaginationLink>
20
        </PaginationItem>
21
        <PaginationItem>
22
          <PaginationLink href="#" isActive>
23
            2
24
          </PaginationLink>
25
        </PaginationItem>
26
        <PaginationItem>
27
          <PaginationLink href="#">3</PaginationLink>
28
        </PaginationItem>
29
        <PaginationItem>
30
          <PaginationEllipsis />
31
        </PaginationItem>
32
        <PaginationItem>
33
          <PaginationNext href="#" />
34
        </PaginationItem>
35
      </PaginationContent>
36
    </Pagination>
37
  );
38
}

Installation

pnpm dlx shadcn@latest add @zaidan/pagination
npx shadcn@latest add @zaidan/pagination
yarn dlx shadcn@latest add @zaidan/pagination
bunx --bun shadcn@latest add @zaidan/pagination

Usage

1
import {
2
  Pagination,
3
  PaginationContent,
4
  PaginationEllipsis,
5
  PaginationItem,
6
  PaginationLink,
7
  PaginationNext,
8
  PaginationPrevious,
9
} from "~/components/ui/pagination";

1
<Pagination>
2
  <PaginationContent>
3
    <PaginationItem>
4
      <PaginationPrevious href="#" />
5
    </PaginationItem>
6
    <PaginationItem>
7
      <PaginationLink href="#">1</PaginationLink>
8
    </PaginationItem>
9
    <PaginationItem>
10
      <PaginationLink href="#" isActive>
11
        2
12
      </PaginationLink>
13
    </PaginationItem>
14
    <PaginationItem>
15
      <PaginationLink href="#">3</PaginationLink>
16
    </PaginationItem>
17
    <PaginationItem>
18
      <PaginationEllipsis />
19
    </PaginationItem>
20
    <PaginationItem>
21
      <PaginationNext href="#" />
22
    </PaginationItem>
23
  </PaginationContent>
24
</Pagination>

Composition

Use the following composition to build a Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Simple

A simple pagination with only page numbers.

1
import {
2
  Pagination,
3
  PaginationContent,
4
  PaginationItem,
5
  PaginationLink,
6
} from "~/components/ui/pagination";
7

8
export default function PaginationSimple() {
9
  return (
10
    <Pagination>
11
      <PaginationContent>
12
        <PaginationItem>
13
          <PaginationLink href="#">1</PaginationLink>
14
        </PaginationItem>
15
        <PaginationItem>
16
          <PaginationLink href="#" isActive>
17
            2
18
          </PaginationLink>
19
        </PaginationItem>
20
        <PaginationItem>
21
          <PaginationLink href="#">3</PaginationLink>
22
        </PaginationItem>
23
        <PaginationItem>
24
          <PaginationLink href="#">4</PaginationLink>
25
        </PaginationItem>
26
        <PaginationItem>
27
          <PaginationLink href="#">5</PaginationLink>
28
        </PaginationItem>
29
      </PaginationContent>
30
    </Pagination>
31
  );
32
}

Icons Only

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

Rows per page

1
import { Field, FieldLabel } from "~/components/ui/field";
2
import {
3
  Pagination,
4
  PaginationContent,
5
  PaginationItem,
6
  PaginationNext,
7
  PaginationPrevious,
8
} from "~/components/ui/pagination";
9
import {
10
  Select,
11
  SelectContent,
12
  SelectItem,
13
  SelectTrigger,
14
  SelectValue,
15
} from "~/components/ui/select";
16

17
const pageSizes = [10, 25, 50, 100];
18

19
export default function PaginationIconsOnly() {
20
  return (
21
    <div class="flex items-center justify-between gap-4">
22
      <Field orientation="horizontal" class="w-fit">
23
        <FieldLabel for="select-rows-per-page">Rows per page</FieldLabel>
24
        <Select
25
          options={pageSizes}
26
          defaultValue={25}
27
          itemComponent={(props) => (
28
            <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
29
          )}
30
        >
31
          <SelectTrigger class="w-20" id="select-rows-per-page">
32
            <SelectValue<number>>{(state) => state.selectedOption()}</SelectValue>
33
          </SelectTrigger>
34
          <SelectContent />
35
        </Select>
36
      </Field>
37
      <Pagination class="mx-0 w-auto">
38
        <PaginationContent>
39
          <PaginationItem>
40
            <PaginationPrevious href="#" />
41
          </PaginationItem>
42
          <PaginationItem>
43
            <PaginationNext href="#" />
44
          </PaginationItem>
45
        </PaginationContent>
46
      </Pagination>
47
    </div>
48
  );
49
}

API Reference

Pagination

The root navigation element for the pagination controls. It renders a semantic <nav> with an accessible pagination label.

Prop	Type	Default
`class`	`string`	-

PaginationContent

The list that contains pagination items.

Prop	Type	Default
`class`	`string`	-

PaginationItem

An individual pagination list item.

Prop	Type	Default
`class`	`string`	-

PaginationLink

A page link. Set isActive to announce the current page with aria-current="page".

Prop	Type	Default
`isActive`	`boolean`	`false`
`size`	`ButtonProps["size"]`	`"icon"`
`class`	`string`	-

PaginationPrevious

A link to the previous page.

Prop	Type	Default
`text`	`string`	`"Previous"`
`class`	`string`	-

PaginationNext

A link to the next page.

Prop	Type	Default
`text`	`string`	`"Next"`
`class`	`string`	-

PaginationEllipsis

An inaccessible visual indicator that more pages are available.

Prop	Type	Default
`class`	`string`	-

Pagination is a native Solid composition of semantic HTML elements, so it does not expose a Kobalte or Corvu primitive API.