Pagination

The Pagination component allows you to display active page and navigate between multiple pages.

import { Pagination } from '@nextui-org/react';

Default

You can set a starting page with the initialPage prop.

Colors

You can change the color of the Pagination with the property color.

Sizes

Change the size of the entire Pagination including width, height and font-size with the size property.

Rounded

You can completely round the corners of any type of Pagination with the rounded property.

Shadow

You can add a shadow effect with the property shadow.

Only Dots

You can completely change the style of the component and remove the internal numbers in each Pagination button with the property onlyDots.

Loop

You can make the pagination infinite with the loop property, this means that the arrow buttons are no longer in the disabled state.

No Margin

You can change the style of the entire Pagination component by removing the margin between the buttons and changing the radius with the noMargin property.

No Controls

You can remove the next and previous arrows with controls={false} property.

No Animated

You can disable the animation of the entire Modal with the property animated={false}.

Siblings

You can control the amount of active item siblings with siblings prop.

Boundaries

You can control the amount of items displayed after previous and before next buttons with boundaries prop.

APIs

Pagination Props

Attribute	Type	Accepted values	Description	Default
color	`NormalColors`	NormalColors	Change pagination color	`default`
size	`NormalSizes`	NormalSizes	Change pagination size	`medium`
page	`number`	-	Active page number	-
initialPage	`number`	-	Selected page on initial render	`1`
total	`number`	-	Total amount of pages	`1`
siblings	`number`	-	Amount on left/right side of selected page	`1`
boundaries	`number`	-	Amount of elements visible on left/right edges	`1`
dotsJump	`number`	-	Number of pages that are added or subtracted on the '...' button	`5`
bordered	`boolean`	`true/false`	Bordered pagination	`false`
rounded	`boolean`	`true/false`	Rounded pagination	`false`
shadow	`boolean`	`true/false`	Display shadow effect	`false`
animated	`boolean`	`true/false`	Display move and scale animation	`true`
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` pagination	`normal`
loop	`boolean`	`true/false`	Non disable next/previous controls	`false`
noMargin	`boolean`	`true/false`	Remove margin amongst pagination items	`false`
controls	`boolean`	`true/false`	Enable/Disable pagination controls	`true`
onlyDots	`boolean`	`true/false`	Show only dots as pagination elements	`false`
onChange	`(page: number) => void	-	Callback fired after change of each page	-
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`nav`
...	`HTMLAttributes`	`'id', 'className', ...`	Native props	-

Pagination types

Normal Colors

type NormalColors =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'gradient';

Normal Sizes

type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold';

Card Table

Created by Junior Garcia

Deployed on

Documentation

Pagination