Mokri

Preview

<> import.ts

import { Pagination } from "@/components/ui/pagination"

<> component.tsx

import { Pagination } from "@/components/ui/pagination"

<Pagination />

Responsive pagination with numbers, dots, and navigation controls.

<> import.ts

import { Pagination, PaginationPresets } from "@/components/ui/pagination"

Prop	Type	Default	Description
`currentPage`	`number`	—	Current page index (1-based)
`totalPages`	`number`	—	Total pages
`onPageChange`	`(page: number) => void`	—	Page change handler
`variant`	`"default" \| "dots" \| "numbers" \| "minimal"`	`"default"`	Visual style
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control sizing
`showFirstLast`	`boolean`	`true`	Show first/last buttons (desktop)
`showPrevNext`	`boolean`	`true`	Show prev/next buttons
`maxVisiblePages`	`number`	`5`	Max visible numbers (desktop)
`className`	`string`	`""`	Additional CSS classes
`disabled`	`boolean`	`false`	Disable controls
`withBorder`	`boolean`	`true`	Add borders to buttons

simple

Prev/next only, small window

full

First/prev/next/last with numbers

minimal

Minimal with numbers

dots

Dots indicators

numbers

Numbers only