Pagination

Pagination renders blog-style previous/status/next navigation.

CoreNavigation@gaudi/design-system/core/PaginationView in Storybook Source

Hovering or focusing the center status reveals direct page shortcuts.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Pagination } from '@gaudi/design-system/core/Pagination';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/pagination-jump-to-page.json.

Usage

import { PaginationBar } from '@gaudi/design-system';
<PaginationBar currentPage={1} totalPages={4} getHref={(page) => `?page=${page}`} />

Examples

API

11 props

Accessibility

Pagination renders a nav landmark, disabled button states for unavailable directions, keyboard-focusable status shortcuts, and aria-current on active numbered links.

ItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examples LinkLink centralizes navigation semantics for internal, anchor, and external links.SelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examples NumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examples CardCard frames reusable content with title, subtitle, and optional children.8 examples

Pagination

Installation

Usage

Examples

Jump to a page

Numbered page styles

Previous and next with page info

Rows per page and range

API

Accessibility

Related