Binhlaig UI Component

Pagination

A flexible pagination component for navigating through pages, tables and result sets.

Installation

Initialize Binhlaig UI once, then install Pagination using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add pagination

Import

Import the Pagination primitives you need.

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

Basic

Use numbered pages together with previous, next and ellipsis controls.

Controlled

Use PaginationButton when pagination state is managed by React.

Previous and Next

A simple pattern for compact applications and dashboards.

Compact

Use ellipsis when the total page count is large.

Update or Overwrite

Replace an older Pagination source with the latest registry version.

npx binhlaig-ui@latest add pagination --overwrite

API Reference

Main primitives available in Binhlaig UI Pagination.

Component	Purpose
`Pagination`	Root navigation wrapper.
`PaginationContent`	Container for pagination items.
`PaginationItem`	Wraps an individual pagination control.
`PaginationLink`	Anchor-based page link.
`PaginationButton`	Button-based page control for local state.
`PaginationPrevious`	Previous page link.
`PaginationNext`	Next page link.
`PaginationEllipsis`	Indicates skipped page ranges.

Previous component

Navbar

All components