Pagination

Navigation that splits content across a sequence of numbered pages.

Default

Pagination is an accessible <nav> wrapping a PaginationContent list of PaginationItems, with the current page marked by active.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem disabled>
          <PaginationLink href="#">
            <ChevronLeft className="size-4" />
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem active>
          <PaginationLink active href="#">
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">
            <ChevronRight className="size-4" />
          </PaginationLink>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Sizes

The size prop on PaginationContent offers sm, md (default), and lg.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationSizes() {
  return (
    <div className="flex flex-col gap-3">
      <Pagination>
        <PaginationContent size="sm">
          <PaginationItem disabled>
            <PaginationLink href="#">
              <ChevronLeft className="size-4" />
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">
              <ChevronRight className="size-4" />
            </PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent>
          <PaginationItem disabled>
            <PaginationLink href="#">
              <ChevronLeft className="size-4" />
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">
              <ChevronRight className="size-4" />
            </PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent size="lg">
          <PaginationItem disabled>
            <PaginationLink href="#">
              <ChevronLeft className="size-4" />
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">
              <ChevronRight className="size-4" />
            </PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}

Circle

The shape="circle" prop on PaginationContent renders rounded page links.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function PaginationCircle() {
  return (
    <Pagination>
      <PaginationContent shape="circle">
        <PaginationItem disabled>
          <PaginationLink href="#">
            <ChevronLeft className="size-4" />
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem active>
          <PaginationLink active href="#">
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">
            <ChevronRight className="size-4" />
          </PaginationLink>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Variants

The variant prop on PaginationContent sets the active-page treatment: filled (default), subtle, or outlined.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";

export default function PaginationVariants() {
  return (
    <div className="flex flex-col gap-3">
      <Pagination>
        <PaginationContent variant="filled">
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent variant="subtle">
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <Pagination>
        <PaginationContent variant="outlined">
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem active>
            <PaginationLink active href="#">
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}

Colors

The color prop on PaginationContent conveys intent with primary (default), secondary, info, success, warning, danger, or neutral.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "info",
  "success",
  "warning",
  "danger",
  "neutral",
] as const;

export default function PaginationColors() {
  return (
    <div className="flex flex-col gap-3">
      {colors.map((color) => (
        <Pagination key={color}>
          <PaginationContent color={color}>
            <PaginationItem>
              <PaginationLink href="#">1</PaginationLink>
            </PaginationItem>
            <PaginationItem active>
              <PaginationLink active href="#">
                2
              </PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink href="#">3</PaginationLink>
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      ))}
    </div>
  );
}

Disabled

The disabled prop on PaginationItem mutes and deactivates a control such as the previous link.

tsx

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@hummingbirdui/react";

export default function PaginationDisabled() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem disabled>
          <PaginationLink href="#">Prev</PaginationLink>
        </PaginationItem>
        <PaginationItem active>
          <PaginationLink active href="#">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">Next</PaginationLink>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API Reference

Pagination

The accessible <nav> wrapper accepts only asChild and className.

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

PaginationContent

Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg"`	`"md"`	Size of the page links.
shape	`"default" \| "circle"`	`"default"`	Shape of the page links.
variant	`"filled" \| "subtle" \| "outlined"`	`"filled"`	Active-page treatment.
color	`"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"primary"`	Color theme of the active page.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

PaginationItem

Prop	Type	Default	Description
active	`boolean`	`false`	Marks the item as the current page.
disabled	`boolean`	`false`	Disables the item.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

PaginationLink

Prop	Type	Default	Description
active	`boolean`	`false`	Marks the link as the current page for assistive tech.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React pagination is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available pagination classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousNavbar NextPopover