🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Pagination

A navigation component for dividing content across multiple pages.

Pagination helps users navigate through large sets of data by breaking content into manageable pages. It provides clear navigation controls and indicates the current page position within the total set.

Example

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" size="default" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Installation


npm install @strongtie/design-system

import { Pagination } from "@strongtie/design-system/pagination"

Components

This module exports the following components:

Pagination
PaginationContent
PaginationEllipsis
PaginationItem
PaginationLink
PaginationNext
PaginationPrevious

Props

`<PaginationLink>`

Prop	Type	Default	Description
`isActive`	`boolean`	-
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	`icon`

`<PaginationNext>`

Prop	Type	Default	Description
`isActive`	`boolean`	-
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	`default`

`<PaginationPrevious>`

Prop	Type	Default	Description
`isActive`	`boolean`	-
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`	`default`

Examples

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" size="default" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Disabled Controls

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationDisabledControls() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            size="default"
            aria-disabled="true"
            className="pointer-events-none opacity-50"
          />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon" isActive>
            1
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" size="icon">
            3
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" size="default" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

With Ellipsis

"use client"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@strongtie/design-system/pagination"

export function PaginationWithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>4</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>5</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>6</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>10</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

pagination
pagination-content
pagination-ellipsis
pagination-item
pagination-link
pagination-next
pagination-previous

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Navigation Menu Popover

On This Page

Example Installation Components Props <PaginationLink><PaginationNext><PaginationPrevious>Examples Disabled Controls With Ellipsis Styling Classes Accessibility

Contribute