Pagination - Stera UI

Installation

pnpm dlx stera-ui add pagination

Usage

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

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Simple

With Rows Per Page

Rows per page

Combine with NativeSelect to let users control how many rows are shown per page.

API Reference

PaginationLink

Prop	Type	Default
`href`	`string`	—
`isActive`	`boolean`	`false`

PaginationPrevious / PaginationNext

Prop	Type	Default
`href`	`string`	—
`text`	`string`	`"Previous"` / `"Next"`