Menu
Documentation
v4.0.0-beta.4

Pagination

<BasePagination /> · A set of pagination options.

View SourceOpen Issue
vue
<template>
  <BasePagination
    v-model:page="page"
    :items-per-page="8"
    :total="512"
    :sibling-count="2"
  />
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
</script>

Features

  • Enable quick access to first, or last page
  • Enable to show edges constantly, or not

Anatomy

You can use this component as a self closing one or with its slots to customize the pagination buttons layout.

vue
<template>
  <BasePagination>
    <div>
      <BasePaginationButtonFirst />
      <BasePaginationButtonPrev />
    </div>
    <BasePaginationItems />
    <div>
      <BasePaginationButtonNext />
      <BasePaginationButtonLast />
    </div>
  </BasePagination>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
items-per-page
default:-
number

Number of items per page

variant
default:"primary"
"primary" | "dark"

The color of the pagination active button.

size
default:"md"
"md" | "sm" | "lg"

The size of the pagination buttons.

rounded
default:"sm"
"none" | "md" | "sm" | "lg" | "full"

The radius of the pagination.

page
default:-
number

The controlled value of the current page. Can be binded as `v-model:page`.

default-page
default:-
number

The value of the page that should be active when initially rendered. Use when you do not need to control the value state.

total
default:-
number

Number of items in your list

sibling-count
default:-
number

Number of sibling should be shown around the current page

disabled
default:-
boolean

When `true`, prevents the user from interacting with item

show-edges
default:true
boolean

When `true`, always show first page, last page, and ellipsis

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Event Emitted Value Type
update:page
[value: number]
Slot Type
#default
{ items: ({ type: "ellipsis"; } | { type: "page"; value: number; })[]; }
#ellipsis
any
#page
{ page: number; }

Examples

Variants

Use the variant prop to change the color of the pagination.

vue
<template>
  <BasePagination
    v-model:page="page"
    :items-per-page="8"
    :total="512"
    :sibling-count="2"
    rounded="lg"
    color="dark"
  />
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
</script>

Radius

Use the rounded prop to change the border radius of the pagination.

vue
<template>
  <BasePagination
    v-model:page="page"
    :items-per-page="8"
    :total="512"
    :sibling-count="2"
    rounded="full"
  />
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
</script>

Size

Use the size prop to change the size of the pagination buttons.

vue
<template>
  <BasePagination
    v-model:page="page"
    :items-per-page="8"
    :total="512"
    :sibling-count="2"
    size="sm"
  />
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
</script>

Composition

Use the slots to customize the pagination buttons layout. Use the <PaginationItems /> slot to render the pagination items. Use the <PaginationButtonFirst />, <PaginationButtonPrev />, <PaginationButtonNext />, and <PaginationButtonLast /> slots to render the first, previous, next, and last buttons.

vue
<template>
  <BasePagination
    v-slot="{ items }"
    v-model:page="page"
    :items-per-page="8"
    :total="512"
    :sibling-count="2"
    size="sm"
    class="w-full justify-between"
  >
    <div class="flex gap-2">
      <BasePaginationButtonFirst />
      <BasePaginationButtonPrev />
    </div>
    <BasePaginationItems :items />
    <div class="flex gap-2">
      <BasePaginationButtonNext />
      <BasePaginationButtonLast />
    </div>
  </BasePagination>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
</script>

Slots usage

Use the slots to customize the pagination buttons layout. Use the <page /> slot to render the page number. Use the <ellipsis /> slot to render the ellipsis.

vue
<template>
  <BasePagination
    v-model:page="page"
    :items-per-page="8"
    :total="1_000_000"
    :sibling-count="1"
    rounded="full"
    variant="dark"
  >
    <template #page="{ page }">
      {{ formatter.format(page) }}
    </template>
    <template #ellipsis>
      &#8230;
    </template>
  </BasePagination>
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const page = computed({
  get() {
    return Number(route.query.page) || 1
  },
  set(value: number) {
    router.replace({ query: { ...route.query, page: value } })
  },
})
const formatter = new Intl.NumberFormat('en-US', { style: 'decimal' })
</script>

Message

Paragraph