1. Components
  2. Pagination

Navigations

Tailwind CSS Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Basic usage

Example

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas.

Working with icons

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

Disabled and active state

Pagination links are customizable for different circumstances.

Types

Bordered

Bordered pagination variant.

Bordered group

Bordered group pagination variant.

Mini size

Mini size pagination variant.

Working with Tooltip

Tooltip pagination variant.

Jumper

Jumper pagination variant.

Go to page
Go to page
Go to page

More with Dropdown

More with Dropdown pagination variant.

Stretched

Stretched pagination variant.

Alignment

Change the alignment of pagination components. For example, with justify-center:

Or with justify-end:

Sizes

Basic

Basic paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Bordered

Bordered paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Bordered group

Bordered group paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Mini size

Mini size paginations stacked small to large sizes.

Shape

Basic

Basic paginations shape small to large sizes.

Go to page
Go to page
Go to page

Bordered

Bordered paginations shape small to large sizes.

Go to page
Go to page
Go to page

Bordered group

Bordered group paginations shape small to large sizes.

Go to page
Go to page
Go to page

Mini size

Mini size paginations shape small to large sizes.