Pagination

Pagination with page navigation, next and previous links.

Prop	Default	Type	Description
`total`	`0`	`number`	The total number of items in your list.
`defaultPage`	`1`	`number`	The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
`disabled`	`false`	`boolean`	When true, prevents the user from interacting with item.
`itemsPerPage`	`10`	`number`	Number of items per page.
`page`	-	`number`	The controlled value of the current page. Can be binded as `v-model:page`.
`showEdges`	`false`	`boolean`	When true, always show first page, last page, and ellipsis.

Prop	Default	Type	Description
`siblingCount`	`2`	`number`	The number of surrounding pages displayed around the current page.

Prop	Default	Type	Description
`showFirst`	`true`	`boolean`	Displays the first page button.
`showLast`	`true`	`boolean`	Displays the last page button.
`showPrev`	`true`	`boolean`	Displays the previous page button.
`showNext`	`true`	`boolean`	Displays the next page button.
`showListItem`	`true`	`boolean`	Displays the list items.

Size

Prop	Default	Type	Description
`size`	`sm`	`string`	Adjusts the size of the entire pagination.
`firstPageSize`	`sm`	`string`	Customizes the size of the first page button.
`lastPageSize`	`sm`	`string`	Customizes the size of the last page button.
`prevPageSize`	`sm`	`string`	Customizes the size of the previous page button.
`nextPageSize`	`sm`	`string`	Customizes the size of the next page button.
`listItemSize`	`sm`	`string`	Customizes the size of the page list items.
`ellipsisSize`	`sm`	`string`	Customizes the size of the ellipsis indicator.

By default, the size prop applies to height, width, padding, and font size. If you only want to change the size of the button, use the square prop. Refer to the Button square section for more information.

Variant and Color

Prop	Default	Type	Description
`pagination-selected`	`solid-primary`	`{variant}-{color}`	The color of the selected page.
`pagination-unselected`	`solid-white`	`{variant}-{color}`	The color of the unselected page.
`pagination-ellipsis`	`text-black`	`{variant}-{color}`	The color of the ellipsis.

Read more in Button variant and color section

Preview

Code

Rounded

Preview

Code

Sub Components

Prop	API reference	Description
`_pagination-list-item`	Reka Pagination ListItem API	Customizes the pagination list item component.
`_pagination-prev`	Reka Pagination Prev API	Customizes the previous page navigation button.
`_pagination-next`	Reka Pagination Next API	Customizes the next page navigation button.
`_pagination-first`	Reka Pagination First API	Customizes the first page navigation button.
`_pagination-last`	Reka Pagination Last API	Customizes the last page navigation button.
`_pagination-ellipsis`	Reka Pagination Ellipsis API	Customizes the ellipsis indicator in the pagination.
`_pagination-list`	Reka Pagination List API	Customizes the pagination list component.

Preview

Code

Slots

Name	Props	Description
`first`	-	Customizes the first page navigation button.
`last`	-	Customizes the last page navigation button.
`prev`	-	Customizes the previous page navigation button.
`next`	-	Customizes the next page navigation button.
`list-item`	`item`, `page`	Customizes the pagination list item component.
`ellipsis`	-	Customizes the ellipsis indicator in the pagination.

Preview

Code

Presets

shortcuts/pagination.ts

type PaginationPrefix = 'pagination'

export const staticPagination: Record<`${PaginationPrefix}-${string}` | PaginationPrefix, string> = {
  // configurations
  'pagination': 'overflow-hidden',
  'pagination-list': 'flex items-center gap-1 overflow-hidden',

  // components
  'pagination-root': '',
  'pagination-list-item': 'pagination',

  'pagination-ellipsis-base': 'btn-(~ square) flex items-center justify-center',
  'pagination-ellipsis-icon-base': 'square-1.25em',
  'pagination-ellipsis-icon': 'i-lucide-ellipsis',

  'pagination-first': 'pagination',
  'pagination-first-icon': 'i-lucide-chevrons-left',

  'pagination-prev': 'pagination',
  'pagination-prev-icon': 'i-lucide-chevron-left',

  'pagination-next': 'pagination',
  'pagination-next-icon': 'i-lucide-chevron-right',

  'pagination-last': 'pagination',
  'pagination-last-icon': 'i-lucide-chevrons-right',
}

export const dynamicPagination = [
  [
    /^pagination-ellipsis(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = 'text', color = 'black']) =>
      `btn-${variant}-${color}`,
  ],

  [
    /^pagination-selected(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = 'solid', color = 'primary']) =>
      `data-[selected=true]:btn-${variant}-${color}`,
  ],
  [
    /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = 'solid', color = 'white']) =>
      `data-[selected=false]:btn-${variant}-${color}`,
  ],

]

export const pagination = [
  ...dynamicPagination,
  staticPagination,
]

Props

types/pagination.ts

import type { PaginationEllipsisProps, PaginationFirstProps, PaginationLastProps, PaginationListItemProps, PaginationListProps, PaginationNextProps, PaginationPrevProps, PaginationRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import type { NButtonProps } from './button'

interface BaseExtensionProps {
  square?: HTMLAttributes['class']
  class?: HTMLAttributes['class']
  rounded?: HTMLAttributes['class']
  size?: HTMLAttributes['class']
}

type isVisible = boolean

export interface NPaginationProps extends
  PaginationRootProps,
  BaseExtensionProps,
  Pick<NButtonProps, 'paginationSelected' | 'paginationUnselected'>,
  Pick<NPaginationEllipsisProps, 'paginationEllipsis'> {
  showFirst?: isVisible
  showPrev?: isVisible
  showNext?: isVisible
  showLast?: isVisible
  showListItem?: isVisible

  // sub-components
  _paginationList?: Partial<NPaginationListProps>
  _paginationListItem?: Partial<NPaginationListItemProps>
  _paginationEllipsis?: Partial<NPaginationEllipsisProps>
  _paginationFirst?: Partial<NPaginationFirstProps>
  _paginationPrev?: Partial<NPaginationPrevProps>
  _paginationNext?: Partial<NPaginationNextProps>
  _paginationLast?: Partial<NPaginationLastProps>

  una?: NPaginationUnaProps
}

export interface NPaginationListProps extends PaginationListProps, BaseExtensionProps {
  una?: Pick<NPaginationUnaProps, 'paginationList'>
}

export interface NPaginationListItemProps extends PaginationListItemProps, Omit<NButtonProps, 'una'> {
  isSelected?: boolean
  page?: PaginationRootProps['page']

  una?: Pick<NPaginationUnaProps, 'paginationListItem' | 'pagination'> & NButtonProps['una']
}

export interface NPaginationEllipsisProps extends PaginationEllipsisProps, BaseExtensionProps {
  paginationEllipsis?: HTMLAttributes['class']

  una?: Pick<NPaginationUnaProps, 'paginationEllipsis' | 'paginationEllipsisIconBase' | 'paginationEllipsisIcon' | 'pagination'>
}

export interface NPaginationFirstProps extends PaginationFirstProps, Omit<NButtonProps, 'una'> {
  una?: Pick<NPaginationUnaProps, 'paginationFirst' | 'pagination'> & NButtonProps['una']
}

export interface NPaginationPrevProps extends PaginationPrevProps, Omit<NButtonProps, 'una'> {
  una?: Pick<NPaginationUnaProps, 'paginationPrev' | 'pagination'> & NButtonProps['una']
}

export interface NPaginationNextProps extends PaginationNextProps, Omit<NButtonProps, 'una'> {
  una?: Pick<NPaginationUnaProps, 'paginationNext' | 'pagination'> & NButtonProps['una']
}

export interface NPaginationLastProps extends PaginationLastProps, Omit<NButtonProps, 'una'> {
  una?: Pick<NPaginationUnaProps, 'paginationLast' | 'pagination'> & NButtonProps['una']
}

interface NPaginationUnaProps {
  pagination?: HTMLAttributes['class']
  paginationRoot?: HTMLAttributes['class']
  paginationList?: HTMLAttributes['class']
  paginationNext?: HTMLAttributes['class']
  paginationPrev?: HTMLAttributes['class']
  paginationFirst?: HTMLAttributes['class']
  paginationLast?: HTMLAttributes['class']
  paginationListItem?: HTMLAttributes['class']
  paginationEllipsis?: HTMLAttributes['class']
  paginationEllipsisIconBase?: HTMLAttributes['class']
  paginationEllipsisIcon?: HTMLAttributes['class']
}

Components

Pagination.vue

PaginationEllipsis.vue

PaginationListItem.vue

PaginationFirst.vue

PaginationLast.vue

PaginationNext.vue

PaginationPrev.vue

<script setup lang="ts">
import type { PaginationRootEmits } from 'reka-ui'
import type { NPaginationProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import { PaginationList, PaginationRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '../../../utils'
import PaginationEllipsis from './PaginationEllipsis.vue'
import PaginationFirst from './PaginationFirst.vue'
import PaginationLast from './PaginationLast.vue'
import PaginationListItem from './PaginationListItem.vue'
import PaginationNext from './PaginationNext.vue'
import PaginationPrev from './PaginationPrev.vue'

const props = withDefaults(defineProps<NPaginationProps>(), {
  showFirst: true,
  showLast: true,
  showListItem: true,
  showNext: true,
  showPrev: true,
})

const emits = defineEmits<PaginationRootEmits>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
</script>

<template>
  <PaginationRoot
    v-slot="{ page }"
    v-bind="rootProps"
    :class="cn(
      'pagination-root',
      props.class,
      props.una?.paginationRoot,
    )"
  >
    <PaginationList
      v-slot="{ items }"
      :class="cn(
        'pagination-list',
        props?._paginationList?.class,
        props.una?.paginationList,
      )"
      v-bind="_paginationList"
    >
      <slot>
        <PaginationFirst
          v-if="showFirst"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          v-bind="_paginationFirst"
          :square
          :una
        >
          <slot
            name="first"
          />
        </PaginationFirst>

        <PaginationPrev
          v-if="showPrev"
          :rounded
          :pagination-selected
          :pagination-unselected
          :size
          v-bind="_paginationPrev"
          :square
          :una
        >
          <slot
            name="prev"
          />
        </PaginationPrev>

        <template v-if="showListItem">
          <template v-for="(item, index) in items">
            <slot
              v-if="item.type === 'page'"
              name="list-item"
              :item="item"
              :page="page"
            >
              <PaginationListItem
                :key="index"
                :value="item.value"
                :page
                :rounded
                :size
                :pagination-selected
                :pagination-unselected
                :square
                :una
                v-bind="_paginationListItem"
              />
            </slot>

            <PaginationEllipsis
              v-else
              :key="item.type"
              :index="index"
              :rounded
              :size
              :pagination-ellipsis
              :square
              :una
              v-bind="_paginationEllipsis"
            >
              <slot
                name="ellipsis"
              />
            </PaginationEllipsis>
          </template>
        </template>

        <PaginationNext
          v-if="showNext"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          v-bind="_paginationNext"
          :square
          :una
        >
          <slot
            name="next"
          />
        </PaginationNext>

        <PaginationLast
          v-if="showLast"
          :rounded
          :size
          :pagination-selected
          :pagination-unselected
          :square
          :una
          v-bind="_paginationLast"
        >
          <slot
            name="last"
          />
        </PaginationLast>
      </slot>
    </PaginationList>
  </PaginationRoot>
</template>