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

Pagination

A navigation component that allows users to navigate through pages of content.

Pagination breaks large datasets or content into discrete pages, allowing users to navigate forward and backward through the pages. It helps manage overwhelming amounts of content by displaying a manageable subset at a time. Pagination is commonly used in tables, search results, galleries, or any interface displaying large lists of items.

The component provides accessible navigation with proper ARIA labels and keyboard support.

Example

"use client"

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

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </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`	`false`	Whether this page link represents the currently active page.

`<PaginationNext>`

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this page link represents the currently active page.

`<PaginationPrevious>`

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this page link represents the currently active page.

Examples

"use client"

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

export function PaginationDefault() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </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 disabled />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink>3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext />
        </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.

Component Slots

The following data attributes are used to identify component parts:

pagination
pagination-content
pagination-ellipsis
pagination-item
pagination-link

Additional Classes

Other CSS classes used by this component:

active
pagination
pagination-content
pagination-ellipsis
pagination-icon
pagination-item
pagination-link
pagination-next
pagination-previous
sr-only

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 Component Slots Additional Classes Accessibility

Contribute