Pagination

A neumorphism-styled pagination component with multiple types and color palettes.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/pagination

Then import the components:

tsx

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

Types

The pagination component supports three visual types.

Default

Raised buttons with separators between navigation and page numbers.

Numbers

Minimal style with page numbers only.

Fill

Ghost navigation buttons with a cleaner look.

tsx

<PaginationContent type="default">
  <PaginationPrevious palette="violet" type="default" href="#" />
  ...
</PaginationContent>

<PaginationContent type="numbers">
  <PaginationPrevious palette="pink" type="numbers" href="#" />
  ...
</PaginationContent>

<PaginationContent type="fill">
  <PaginationPrevious palette="purple" type="fill" href="#" />
  ...
</PaginationContent>

Color Palettes

Apply different color palettes to customize the pagination appearance.

tsx

<PaginationLink palette="lime" href="#" isActive>1</PaginationLink>
<PaginationLink palette="pink" href="#" isActive>1</PaginationLink>
<PaginationLink palette="violet" href="#" isActive>1</PaginationLink>
<PaginationLink palette="purple" href="#" isActive>1</PaginationLink>
<PaginationLink palette="blue-gray" href="#" isActive>1</PaginationLink>
<PaginationLink palette="gray" href="#" isActive>1</PaginationLink>

Props

PaginationContent

Prop	Type	Default	Description
`type`	`"default" \| "numbers" \| "fill"`	`"default"`	The visual style type of the pagination container.
`className`	`string`	-	Additional CSS classes to apply.

PaginationLink

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this page number is currently active.
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"lime"`	The color palette for the link.
`className`	`string`	-	Additional CSS classes to apply.

PaginationPrevious / PaginationNext

Prop	Type	Default	Description
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"lime"`	The color palette for the navigation button.
`type`	`"default" \| "numbers" \| "fill"`	`"default"`	The visual style type of the navigation button.
`className`	`string`	-	Additional CSS classes to apply.

Examples

Simple Navigation Only

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious palette="blue-gray" href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext palette="blue-gray" href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With Ellipsis

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious palette="violet" href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationSeparator />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="violet" href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="violet" href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="violet" href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationSeparator />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext palette="violet" href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With More Pages

tsx

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious palette="pink" href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationSeparator />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="pink" href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="pink" href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="pink" href="#" isActive>3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="pink" href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink palette="pink" href="#">5</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationSeparator />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext palette="pink" href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>