Glin UI
Radix UIBase UI
Primitive / Moleculebeta

Pagination

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

Edit on GitHub
InvoiceCustomerStatusAmount
INV-1042Northwind TradersPaid$1,280.00
INV-1041Halcyon LabsPending$640.00
INV-1040Brightside CoPaid$2,150.00
INV-1039Orbit StudioOverdue$320.00

Showing 1 to 4 of 48 invoices

Installation

Install from
pnpm dlx @glinui/cli@latest add pagination

Prefer the package?

Usage

Compact

Drop the ellipsis and numbered range when there are only a few pages.

"use client"



import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious
} from "@glinui/ui"



export function PaginationCompactExample() {
  return (
    <div className="mx-auto grid w-full max-w-md gap-6">
      <Pagination>
        <PaginationContent>
          <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
          <PaginationItem><PaginationLink href="#" isActive>4</PaginationLink></PaginationItem>
          <PaginationItem><PaginationNext href="#" /></PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent>
          <PaginationItem><PaginationLink href="#" aria-label="Page 1">1</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" isActive aria-label="Page 2">2</PaginationLink></PaginationItem>
          <PaginationItem><PaginationLink href="#" aria-label="Page 3">3</PaginationLink></PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

Variants

Every look of the shared vocabulary: glinr (the default), plain (shadcn), solid, soft, outline, ghost, gradient and glass. Omit `variant` to follow the ambient design style.

glinr
plain
solid
soft
outline
ghost
gradient
glass
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@glinui/ui"



const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const



export function Demo() {
  return (
    <div className="grid gap-3">
      {variants.map((variant) => (
        <Pagination key={variant} variant={variant}>
          <PaginationContent>
            <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
            <PaginationItem><PaginationNext href="#" /></PaginationItem>
          </PaginationContent>
        </Pagination>
      ))}
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a colourful or photographic backdrop to read as frosted. Pick one in the stage header.

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@glinui/ui"



export function Demo() {
  return (
    <Pagination variant="glass">
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Accessibility

  • Rendered as a nav landmark labelled pagination.
  • The active page link carries aria-current=page.
  • Previous and next have explicit accessible names; the ellipsis has a screen reader label.

Keyboard Interactions

KeyAction
TabMove through page links.
EnterFollow the focused link.

ARIA Attributes

  • `aria-label="pagination"` on nav
  • `aria-current="page"` on active link
  • `aria-label="Go to next page"`

Reduced Motion

Only color transitions are used, and they are disabled with prefers-reduced-motion.

Affected properties

background-color

API Reference

Pagination

PropTypeRequiredDefaultDescription
variant"glinr" | "plain" | "solid" | "soft" | "outline" | "ghost" | "gradient" | "glass"-ambient style (glinr)Look of the page links. Omit it for the ambient design style: pill links with a raised current page. `plain` is the shadcn outline look, `glass` is opt-in and needs a backdrop.
isActivebooleanNo-Auto-generated from TypeScript source.
sizeNonNullable<VariantProps<typeof paginationLinkVariants>["size"]>No"icon"Auto-generated from TypeScript source.

PaginationLink

PropTypeRequiredDefaultDescription
isActivebooleanNofalseMarks the current page with aria-current=page.
sizeNonNullable<VariantProps<typeof paginationLinkVariants>["size"]>NoiconHit area size.

PaginationPrevious / PaginationNext / PaginationEllipsis

PropTypeRequiredDefaultDescription
childrenReactNode--Override the Previous or Next label.
isActivebooleanNo-Auto-generated from TypeScript source.
sizeNonNullable<VariantProps<typeof paginationLinkVariants>["size"]>No"icon"Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Pagination } from "@glinui/ui"

Source Files

pagination.tsx

Dependencies

@glinui/ui@phosphor-icons/reactclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/pagination.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

PaginationProps

PaginationLinkProps

PropTypeRequiredDefaultDescription
isActivebooleanNo--
sizeNonNullable<VariantProps<typeof paginationLinkVariants>["size"]>No"icon"-

PaginationProps

PropTypeRequiredDefaultDescription
variantPanelVariantPropNo-Look of the page links. Omit for the ambient design style (glinr by default): pill links with a raised current page. `plain` is the shadcn outline look; `glass` is opt-in and needs a rich backdrop.