Pagination

A component for navigating through paginated content with customizable page ranges and navigation controls.

Usage

Import the Pagination component from @bun-ui/react and use it in your project:

import { Pagination } from "@bun-ui/react"

<Pagination count={10} />

Examples

Basic Usage

A simple pagination component with default settings:

Controlled

Manage the page state externally:

With First and Last Buttons

Add first and last page navigation buttons:

Variants

The Pagination component supports two variants:

Colors

Customize the color scheme of the pagination:

Sizes

The Pagination component supports three sizes:

Disabled State

Disable the entire pagination component:

Custom Render Item

You can customize the rendering of individual pagination items using the renderItem prop. This allows you to have full control over how each item is displayed while maintaining the pagination logic: