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.

Theme:

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.

Theme:

Disabled and active state

Pagination links are customizable for different circumstances.

Theme:

Types

Bordered

Bordered pagination variant.

Theme:

Bordered group

Bordered group pagination variant.

Theme:

Mini size

Mini size pagination variant.

Theme:

Working with Tooltip

Tooltip pagination variant.

Theme:

Jumper

Jumper pagination variant.

Theme:

More with Dropdown

More with Dropdown pagination variant.

Theme:

Stretched

Stretched pagination variant.

Theme:

Alignment

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

Theme:

Or with justify-end:

Theme:

Sizes

Basic

Basic paginations stacked small to large sizes.

Theme:

Bordered

Bordered paginations stacked small to large sizes.

Theme:

Bordered group

Bordered group paginations stacked small to large sizes.

Theme:

Mini size

Mini size paginations stacked small to large sizes.

Theme:

Shape

Basic

Basic paginations shape small to large sizes.

Theme:

Bordered

Bordered paginations shape small to large sizes.

Theme:

Bordered group

Bordered group paginations shape small to large sizes.

Theme:

Mini size

Mini size paginations shape small to large sizes.

Theme: