1. Components
  2. Pagination

Components

Tailwind CSS Pagination

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

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.

Bordered New

Bordered pagination variant.

Bordered group New

Bordered group pagination variant.

Mini size New

Mini size pagination variant.

Working with Tooltip New

Tooltip pagination variant.

Jumper New

Jumper pagination variant.

Go to page
Go to page
Go to page

More with Dropdown New

More with Dropdown pagination variant.

Stretched New

Stretched pagination variant.

Alignment

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

Or with justify-end:

Basic New

Basic paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Bordered New

Bordered paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Bordered group New

Bordered group paginations stacked small to large sizes.

Go to page
Go to page
Go to page

Mini size New

Mini size paginations stacked small to large sizes.

Basic New

Basic paginations shape small to large sizes.

Go to page
Go to page
Go to page

Bordered New

Bordered paginations shape small to large sizes.

Go to page
Go to page
Go to page

Bordered group New

Bordered group paginations shape small to large sizes.

Go to page
Go to page
Go to page

Mini size New

Mini size paginations shape small to large sizes.