Pagination (Shared)

Page navigation with previous/next controls, numbered links, and ellipsis for overflow.

Overview

Pagination is a composable nav component with accessible labels. The active page gets a bordered, shadowed style. Previous/Next links include chevron icons.

Usage

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

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

Installation

Install via CLI

TypeScript

npx edbn-ui@latest add pagination

Examples

Basic

With Ellipsis

Sub-components

Paginationnav

Root — nav with role='navigation', aria-label='pagination'

PaginationContentul

Flex row list with gap

PaginationItemli

List item wrapper

PaginationLinka

Numbered page link — isActive adds border + shadow

PaginationPreviousa

Previous page link with chevron icon

PaginationNexta

Next page link with chevron icon

PaginationEllipsisspan

Dots indicator for skipped pages