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

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


You can set a starting page with the initialPage prop.


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


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


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


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.


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}.


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


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


Pagination Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange pagination colordefault
sizeNormalSizesNormalSizesChange pagination sizemedium
pagenumber-Active page number-
initialPagenumber-Selected page on initial render1
totalnumber-Total amount of pages1
siblingsnumber-Amount on left/right side of selected page1
boundariesnumber-Amount of elements visible on left/right edges1
dotsJumpnumber-Number of pages that are added or subtracted on the '...' button5
borderedbooleantrue/falseBordered paginationfalse
roundedbooleantrue/falseRounded paginationfalse
shadowbooleantrue/falseDisplay shadow effectfalse
animatedbooleantrue/falseDisplay move and scale animationtrue
borderWeightNormalWeightsNormalWeightsBorder weight for bordered paginationnormal
loopbooleantrue/falseNon disable next/previous controlsfalse
noMarginbooleantrue/falseRemove margin amongst pagination itemsfalse
controlsbooleantrue/falseEnable/Disable pagination controlstrue
onlyDotsbooleantrue/falseShow only dots as pagination elementsfalse
onChange`(page: number) => void-Callback fired after change of each page-
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsnav
...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';
gradient blue backgroundgradient violet background