120k
New

Pagination

PreviousNext

Pagination with page navigation, next and previous links.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/pagination

Usage

<script setup lang="ts">
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
</script>
 
<template>
  <Pagination :items-per-page="10" :total="30" :default-page="2">
    <PaginationContent v-slot="{ items }">
      <PaginationPrevious />
      <template v-for="(item, index) in items" :key="index">
        <PaginationItem
          v-if="item.type === 'page'"
          :value="item.value"
          :is-active="item.value === 2"
        >
          {{ item.value }}
        </PaginationItem>
      </template>
      <PaginationEllipsis :index="4" />
      <PaginationNext />
    </PaginationContent>
  </Pagination>
</template>

Composition

Use the following composition to build a Pagination:

Pagination
└── PaginationContent
    ├── PaginationPrevious
    ├── PaginationItem
    ├── PaginationEllipsis
    └── PaginationNext

Examples

Simple

A simple pagination with only page numbers.

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.