Zum Inhalt springen
1.6k

Paginierung

Nummerierte Seitenlinks mit Vor-/Zurück-Schaltflächen für Suchergebnisse, Tabellen und Archive – im neobrutalistischen „Borders-and-Shadows“-Stil.

import {
  Pagination,
  PaginationContent,

Die Pagination zerlegt eine lange Ergebnisliste in nummerierte Seitenlinks mit Zurück- und Weiter-Steuerung. Darunter liegt kein Primitive – eine nav-Landmarke umschließt schlichte Anker-Tags, jeder über Button gerendert und nach dem neobrutalistischen Rezept gestaltet: dicke Rahmen, harte Schatten und kräftige Typografie.

Typische Anwendungsfälle:

  • Such- und Übersichtsseiten – Produktraster, Jobbörsen, Verzeichnisse, in denen Nutzer direkt zu Seite 12 springen.
  • Datentabellen – kombiniere die Icons-only-Variante in Admin-Ansichten mit einer Zeilen-pro-Seite-Auswahl.
  • Blog- und Doku-Archive – echte <a>-Links geben jeder Seite eine eigene crawlbare URL, was Infinite Scroll nicht kann.

Installation

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
npx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/pagination.json

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

components/ui/pagination.tsx
import * as React from "react"
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn("flex items-center gap-0.5", className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) {
  return (
    <Button
      asChild
      variant={isActive ? "default" : "ghost"}
      size={size}
      className={cn(className)}
    >
      <a
        aria-current={isActive ? "page" : undefined}
        data-slot="pagination-link"
        data-active={isActive}
        {...props}
      />
    </Button>
  )
}

function PaginationPrevious({
  className,
  text = "Previous",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn("pl-1.5!", className)}
      {...props}
    >
      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
      <span className="hidden sm:block">{text}</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  text = "Next",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn("pr-1.5!", className)}
      {...props}
    >
      <span className="hidden sm:block">{text}</span>
      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn(
        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <MoreHorizontalIcon />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Komposition

Verwende die folgende Komposition, um eine Pagination aufzubauen:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Beispiele

Einfach

Eine einfache Paginierung, nur mit Seitenzahlen.

import {
  Pagination,
  PaginationContent,

Nur Icons

Verwende nur die Buttons für vorherige und nächste Seite ohne Seitenzahlen. Das ist nützlich für Datentabellen mit einer Auswahl der Zeilen pro Seite.

import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,

Next.js

Standardmäßig rendert die Komponente <PaginationLink /> ein <a />-Tag.

Um die Komponente <Link /> von Next.js zu verwenden, nimm die folgenden Änderungen an pagination.tsx vor.

+ import Link from "next/link"
 
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
 
const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

RTL

Um RTL-Unterstützung in Neobrutalism zu aktivieren, sieh dir die RTL-Konfigurationsanleitung an.

"use client"

import * as React from "react"

Changelog

RTL-Unterstützung

Wenn du von einer früheren Version der Komponente Pagination aktualisierst, musst du die folgenden Änderungen vornehmen, um die Prop text hinzuzufügen:

Aktualisiere PaginationPrevious.

  function PaginationPrevious({
    className,
+   text = "Previous",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to previous page"
        size="default"
        className={cn("cn-pagination-previous", className)}
        {...props}
      >
        <ChevronLeftIcon />
        <span className="cn-pagination-previous-text hidden sm:block">
-         Previous
+         {text}
        </span>
      </PaginationLink>
    )
  }

Aktualisiere PaginationNext.

  function PaginationNext({
    className,
+   text = "Next",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to next page"
        size="default"
        className={cn("cn-pagination-next", className)}
        {...props}
      >
-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
+       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
        <ChevronRightIcon />
      </PaginationLink>
    )
  }

Barrierefreiheit

Pagination ist linkbasierte Navigation und kein zusammengesetztes Widget, es gibt also kein eigenes WAI-ARIA-Pattern – die native Link-Semantik erledigt die Arbeit. Die Wurzel rendert eine <nav>-Landmarke mit aria-label="pagination", der aktive PaginationLink trägt aria-current="page", die Zurück-/Weiter-Steuerungen bringen explizite aria-labels mit, und PaginationEllipsis ist aria-hidden und trägt den nur für Screenreader sichtbaren Text „More pages“.

Die Tastaturinteraktionen entsprechen dem nativen Linkverhalten des Browsers:

TasteAktion
Tab / Shift + TabBewegt den Fokus zwischen den Seitenlinks und aus ihnen heraus
EnterFolgt dem fokussierten Link