Pagination

This component requires the FyskProvider. See Quick Start →

Preview

StatefulPagination

TypeScript

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/pagination.json

Usage

tsx

1import {
2Pagination,
3PaginationContent,
4PaginationEllipsis,
5PaginationItem,
6PaginationLink,
7PaginationNext,
8PaginationPrevious,
9} from "@/components/ui"
10
11<Pagination>
12<PaginationContent>
13  <PaginationItem>
14    <PaginationPrevious href="#" />
15  </PaginationItem>
16  <PaginationItem>
17    <PaginationLink href="#">1</PaginationLink>
18  </PaginationItem>
19  <PaginationItem>
20    <PaginationNext href="#" />
21  </PaginationItem>
22</PaginationContent>
23</Pagination>

Examples

Default

Standard manually composed pagination.

Component

TypeScript

Stateful Pagination

Automatically handles ellipses, page math, and first/last buttons.

Component

TypeScript

Features

Stateful Helper: StatefulPagination component handles all logic for calculating page ranges and showing ellipses.
Glass Variant: Includes a Polished glass variant designed for dark backgrounds and modern UIs.
Minimal Style: A borderless minimal variant for a cleaner, less intrusive look.
Custom Shapes: Toggle between circle, square, and rounded shapes.

Props

Pagination

Prop	Type	Default	Description
`variant`	`"default" \| "glass" \| "minimal"`	`"default"`	The visual style of the pagination items.
`shape`	`"circle" \| "square" \| "rounded"`	`"circle"`	Internal shape of the page links.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the items.

StatefulPagination

Prop	Type	Default	Description
`total`	`number`	-	Total number of items across all pages.
`page`	`number`	-	The current active page (1-indexed).
`pageSize`	`number`	`10`	Items per page.
`siblingCount`	`number`	`1`	Number of page buttons to show on each side of current page.
`onChange`	`(page: number) => void`	-	Callback when page changes.
`showFirstLast`	`boolean`	`false`	Shows buttons to jump to the very first/last pages.

Accepts all standard HTML attributes.