Pagination

Page navigation component with previous, next, and page numbers.

...

Page 1 of 10

Installation

React

npx @galaxy-stack/nebula-cli add pagination

Vue

npx @galaxy-stack/nebula-cli add pagination

Angular

npx @galaxy-stack/nebula-cli add pagination

global

# If you have installed galaxy-design globally
galaxy-design add pagination

Usage

React

import { Pagination } from '@/components/pagination'

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

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
    />
  )
}

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { Pagination } from '@/components/pagination'

const currentPage = ref(1)
const totalPages = 10

const handlePageChange = (page: number) => {
  currentPage.value = page
}
</script>

<template>
  <Pagination
    :current-page="currentPage"
    :total-pages="totalPages"
    @page-change="handlePageChange"
  />
</template>

Angular

import { Component } from '@angular/core'
import { PaginationComponent } from '@/components/pagination'

@Component({
  selector: 'app-pagination-demo',
  standalone: true,
  imports: [PaginationComponent],
  template: `
    <ui-pagination
      [currentPage]="currentPage"
      [totalPages]="totalPages"
      (pageChange)="handlePageChange($event)"
    />
  `
})
export class PaginationDemo {
  currentPage = 1
  totalPages = 10

  handlePageChange(page: number) {
    this.currentPage = page
  }
}

API Reference

Props

This component accepts the following props:

Prop	Type	Default	Description
...	...	...	...

Props

Prop	Type	Default	Description
currentPage	number	1	The current active page (1-indexed)
totalPages	number	1	Total number of pages
siblingCount	number	1	Number of page buttons to show on each side of current page
onPageChange	(page: number) => void	-	Callback fired when page changes

Examples

With Custom Sibling Count

React

<Pagination
  currentPage={currentPage}
  totalPages={20}
  siblingCount={2}
  onPageChange={setCurrentPage}
/>

Vue

<Pagination
  :current-page="currentPage"
  :total-pages="20"
  :sibling-count="2"
  @page-change="handlePageChange"
/>

Angular

<ui-pagination
  [currentPage]="currentPage"
  [totalPages]="20"
  [siblingCount]="2"
  (pageChange)="handlePageChange($event)"
/>

With Data Table

React

const itemsPerPage = 10
const totalItems = 100
const totalPages = Math.ceil(totalItems / itemsPerPage)

const paginatedData = data.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
)

return (
  <>
    <Table data={paginatedData} />
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
    />
  </>
)

Accessibility

• Uses semantic <nav> element with role="navigation"
• Page buttons have aria-label describing their function
• Current page has aria-current="page"
• Disabled buttons have disabled attribute and reduced opacity

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)