Pagination

Navigation controls for moving between pages of content.

Pagination

Installation

pnpm dlx stera-ui@latest add pagination

Composition

Use the following composition to build a Pagination:

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

Examples

Simple

Pagination Simple

With Rows Per Page

Rows per page

Pagination with Rows

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"`