Components

Pagination

Navigation controls for moving between pages of content.

example.tsx

Import

tsx

import {
  AppPagination,
  AppPaginationContent,
  AppPaginationItem,
  AppPaginationLink,
  AppPaginationPrevious,
  AppPaginationNext,
  AppPaginationEllipsis,
} from "@/components/primitives/AppPagination"

Active page

Pass isActive to AppPaginationLink to mark the current page. It sets aria-current="page" and applies the active style.

tsx

<AppPaginationLink href="#" isActive>2</AppPaginationLink>

Ellipsis

Use AppPaginationEllipsis to represent skipped page ranges. It renders a MoreHorizontal icon with a screen-reader label.

tsx

<AppPaginationItem>
  <AppPaginationLink href="#">3</AppPaginationLink>
</AppPaginationItem>
<AppPaginationItem>
  <AppPaginationEllipsis />
</AppPaginationItem>
<AppPaginationItem>
  <AppPaginationLink href="#">10</AppPaginationLink>
</AppPaginationItem>

Icons only

Use just AppPaginationPrevious and AppPaginationNext for a compact prev/next control — useful in data tables where space is limited.

example.tsx

API Reference

All AppPagination* components extend their underlying HTML elements and accept all standard props.

Component	Element	Description
AppPagination	<nav>	Root wrapper with role="navigation".
AppPaginationContent	<ul>	Flex container for pagination items.
AppPaginationItem	<li>	Wrapper for each page control.
AppPaginationLink	<a>	Page number link. Accepts isActive to mark the current page.
AppPaginationPrevious	<a>	Previous page button with chevron icon.
AppPaginationNext	<a>	Next page button with chevron icon.
AppPaginationEllipsis	<span>	Skipped range indicator with screen-reader label.

AppPaginationLink props

Prop	Type	Default	Description
href	string	—	URL the link navigates to.
isActive	boolean	false	Marks this page as current. Applies active styling and sets aria-current="page".
size	"default" \| "sm" \| "lg" \| "icon"	"icon"	Controls the button size variant.
className	string	—	Additional Tailwind classes merged via cn().

Source

src/components/primitives/AppPagination.tsx

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

function AppPagination(props: React.ComponentProps<typeof Pagination>) {
  return <Pagination {...props} />
}

function AppPaginationContent(props: React.ComponentProps<typeof PaginationContent>) {
  return <PaginationContent {...props} />
}

function AppPaginationItem(props: React.ComponentProps<typeof PaginationItem>) {
  return <PaginationItem {...props} />
}

function AppPaginationLink(props: React.ComponentProps<typeof PaginationLink> & { isActive?: boolean }) {
  return <PaginationLink {...props} />
}

function AppPaginationPrevious(props: React.ComponentProps<typeof PaginationPrevious>) {
  return <PaginationPrevious {...props} />
}

function AppPaginationNext(props: React.ComponentProps<typeof PaginationNext>) {
  return <PaginationNext {...props} />
}

function AppPaginationEllipsis(props: React.ComponentProps<typeof PaginationEllipsis>) {
  return <PaginationEllipsis {...props} />
}

export {
  AppPagination,
  AppPaginationContent,
  AppPaginationItem,
  AppPaginationLink,
  AppPaginationPrevious,
  AppPaginationNext,
  AppPaginationEllipsis,
}