Pagination

Used to navigate through a series of pages.

import { HStack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={20} pageSize={2} defaultPage={1}>
      <HStack>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the pagination snippet

chakra snippet add pagination

The snippet includes a closed component composition for the Pagination component.

Usage

import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPageText,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

<PaginationRoot>
  <PaginationPrevTrigger />
  <PaginationItems />
  <PaginationPageText />
  <PaginationNextTrigger />
</PaginationRoot>

Examples

Sizes

Use the size prop to change the size of the pagination.

info

The pagination sizes are mapped to the Button component sizes.

import { For, HStack, Stack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <PaginationRoot
            key={size}
            count={10}
            pageSize={2}
            defaultPage={1}
            size={size}
          >
            <HStack>
              <PaginationPrevTrigger />
              <PaginationItems />
              <PaginationNextTrigger />
            </HStack>
          </PaginationRoot>
        )}
      </For>
    </Stack>
  )
}

Variants

Use the variant prop to control the variant of the pagination items and ellipsis.

The variant matches the Button component variant.

import { HStack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={20} pageSize={2} defaultPage={1} variant="solid">
      <HStack>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Controlled

Use the page and onPageChange props to control the current page.

"use client"

import { HStack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"
import { useState } from "react"

const Demo = () => {
  const [page, setPage] = useState(1)

  return (
    <PaginationRoot
      count={20}
      pageSize={2}
      page={page}
      onPageChange={(e) => setPage(e.page)}
    >
      <HStack>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Sibling Count

Use siblingCount to control the number of sibling pages to show before and after the current page.

import { HStack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={200} pageSize={10} defaultPage={10} siblingCount={2}>
      <HStack>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Compact

Use the PaginationPageText to create a compact pagination. This can be useful for mobile views.

import { HStack } from "@chakra-ui/react"
import {
  PaginationNextTrigger,
  PaginationPageText,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={20} pageSize={2} defaultPage={1}>
      <HStack gap="4">
        <PaginationPrevTrigger />
        <PaginationPageText />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

As Link

Use the getHref prop to create a pagination that navigates via links. This will use the LinkButton component to create the links.

info

Edit the LinkButton component to point to the correct framework link component if needed.

"use client"

import { HStack } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot
      count={20}
      pageSize={2}
      defaultPage={1}
      getHref={(page) => `?page=${page}`}
    >
      <HStack>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Attached

Here's an example of composing the pagination with the Group component to attach the pagination items and triggers.

import { Group } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={10} pageSize={2} defaultPage={1} variant="solid">
      <Group attached>
        <PaginationPrevTrigger />
        <PaginationItems />
        <PaginationNextTrigger />
      </Group>
    </PaginationRoot>
  )
}

Count Text

Pass format=long to the PaginationPageText component to show the count text

import { HStack } from "@chakra-ui/react"
import {
  PaginationNextTrigger,
  PaginationPageText,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"

const Demo = () => {
  return (
    <PaginationRoot count={50} pageSize={5} defaultPage={1} maxW="240px">
      <HStack gap="4">
        <PaginationPageText format="long" flex="1" />
        <PaginationPrevTrigger />
        <PaginationNextTrigger />
      </HStack>
    </PaginationRoot>
  )
}

Data Driven

Here's an example of controlling the pagination state and using the state to chunk the data.

Lorem ipsum dolor sit amet 1

Lorem ipsum dolor sit amet 2

Lorem ipsum dolor sit amet 3

Lorem ipsum dolor sit amet 4

Lorem ipsum dolor sit amet 5

"use client"

import { HStack, Stack, Text } from "@chakra-ui/react"
import {
  PaginationItems,
  PaginationNextTrigger,
  PaginationPrevTrigger,
  PaginationRoot,
} from "@/components/ui/pagination"
import { useState } from "react"

const pageSize = 5
const count = 50
const items = new Array(count)
  .fill(0)
  .map((_, index) => `Lorem ipsum dolor sit amet ${index + 1}`)

const Demo = () => {
  const [page, setPage] = useState(1)

  const startRange = (page - 1) * pageSize
  const endRange = startRange + pageSize

  const visibleItems = items.slice(startRange, endRange)

  return (
    <Stack gap="4">
      <Stack>
        {visibleItems.map((item) => (
          <Text key={item}>{item}</Text>
        ))}
      </Stack>
      <PaginationRoot
        page={page}
        count={count}
        pageSize={pageSize}
        onPageChange={(e) => setPage(e.page)}
      >
        <HStack>
          <PaginationPrevTrigger />
          <PaginationItems />
          <PaginationNextTrigger />
        </HStack>
      </PaginationRoot>
    </Stack>
  )
}

Props

Root

Prop	Default	Type
`count` *		`number` Total number of data items
`page`	`'1'`	`number` The active page
`pageSize`	`'10'`	`number` Number of data items per page
`siblingCount`	`'1'`	`number` Number of pages to show beside active page
`type`	`'\'button\''`	`'button' \| 'link'` The type of the trigger element
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultPage`		`number` The initial page of the pagination when it is first rendered. Use when you do not need to control the state of the pagination.
`ids`		`Partial<{ root: string ellipsis(index: number): string prevTrigger: string nextTrigger: string item(page: number): string }>` The ids of the elements in the accordion. Useful for composition.
`onPageChange`		`(details: PageChangeDetails) => void` Called when the page number is changed
`onPageSizeChange`		`(details: PageSizeChangeDetails) => void` Called when the page size is changed
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states

Pagination

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup