Navigation

Pagination

Physical spring-sliding page navigation adaptive for both desktop and mobile views.

Interactive Pagination

Pagination with absolute sliding spring indicators, automatic dot compression, and responsive mobile triggers.

Active Page: 1

•••

'use client'

import React, { useState } from 'react'
import { Pagination, Stack, Text } from 'biibaos'

export default function PaginationDemo() {
  const [currentPage, setCurrentPage] = useState(1)

  return (
    <Stack direction="column" gap={16} align="center">
      <Text variant="body-sm" color="muted">Active Page: {currentPage}</Text>
      <Pagination
        currentPage={currentPage}
        totalPages={10}
        onChange={setCurrentPage}
      />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`currentPage`	`number`	—	The active numerical index of the current page selected
`totalPages`	`number`	—	The absolute total amount of pages available
`onChange`	`(page: number) => void`	—	Callback invoked when a new page index is triggered
`siblingCount`	`number`	1	Number of active siblings to show on each side of the active page index

Timeline