NavigationAvailable

Pagination

Page navigation with an explicitly marked current page.

Page 1 of 3

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/pagination.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { useState } from 'react';
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
} from '@/components/ui/pagination';

export default function Demo() {
  const [page, setPage] = useState(1);
  return (
    <div className="grid gap-4">
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              href="#pagination-demo"
              aria-disabled={page === 1}
              onClick={(event) => {
                event.preventDefault();
                setPage(Math.max(1, page - 1));
              }}
            />
          </PaginationItem>
          {[1, 2, 3].map((number) => (
            <PaginationItem key={number}>
              <PaginationLink
                href="#pagination-demo"
                isActive={page === number}
                onClick={(event) => {
                  event.preventDefault();
                  setPage(number);
                }}
              >
                {number}
              </PaginationLink>
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext
              href="#pagination-demo"
              aria-disabled={page === 3}
              onClick={(event) => {
                event.preventDefault();
                setPage(Math.min(3, page + 1));
              }}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <output id="pagination-demo" className="text-center bl-type-small">
        Page {page} of 3
      </output>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
Hover is not selection. Keep the active state when the pointer leaves.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
PaginationLink.isActive	boolean	false	Marks the current page.

Accessibility

Rules that should remain intact when adapting the component to a product.

Use aria-current for the active page and real destinations in a routed application.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.