Pagination

Pagination with page navigation, next and previous links.

Installation


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

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/ui/pagination';

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink @isActive={{true}} href="#">
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Composition

Use the following composition to build a Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── 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.

API Reference

Pagination

The root pagination component that wraps all pagination elements.

Prop	Type	Default
`@class`	`string`	`undefined`

PaginationContent

A list wrapper for pagination items.

Prop	Type	Default
`@class`	`string`	`undefined`

PaginationItem

A list item that wraps individual pagination elements.

Prop	Type	Default
`@class`	`string`	`undefined`

PaginationLink

A clickable link for individual page numbers.

Prop	Type	Default
`@isActive`	`boolean`	`false`
`@size`	`"default" \| "sm" \| "lg" \| "icon"`	`"icon"`
`@class`	`string`	`undefined`

PaginationPrevious

A link to navigate to the previous page.

Prop	Type	Default
`@class`	`string`	`undefined`

PaginationNext

A link to navigate to the next page.

Prop	Type	Default
`@class`	`string`	`undefined`

PaginationEllipsis

An ellipsis indicator for skipped pages.

Prop	Type	Default
`@class`	`string`	`undefined`

Native Select Popover

On This Page

Installation Usage Composition Examples Simple Icons Only RTL API Reference Pagination PaginationContent PaginationItem PaginationLink PaginationPrevious PaginationNext PaginationEllipsis

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.