Svelte 5 Pagination – Scalable Page Navigator

Full-featured pagination with first/last buttons and smart ellipsis for large page counts. Aria-labeled for screen readers.

accessible svelte components ariadashboard ui svelteSvelte 5 type safe props

Preview

…

Use Case

Designed to scale from 5 to 500 pages, this pagination component uses smart ellipsis logic to keep the UI compact while maintaining context. All buttons include proper ARIA labels.

Industry Applications

Large Dataset Navigation (logistics)

Navigate large inventories with smart ellipsis handling. The pagination scales from 5 to 500+ pages while keeping the UI compact.

  • • First/last page quick navigation
  • • Smart ellipsis for middle page ranges
  • • Configurable sibling count
  • • All buttons ARIA-labeled for screen readers

Props API

Pagination component props
PropTypeDefaultDescription
currentPage number1Bindable current page number
totalPages number5Total number of pages
siblingCount number1Pages to show on each side of current
class string—Additional CSS classes

Related Components

DataTableToolbar

See it in Action

Explore the Pagination in an interactive dashboard environment.

Customize in Showroom

More Layout Components

Panel

The Panel component groups related content with a consistent label style.

Toolbar

This control strip combines multiple input types into a cohesive unit, reducing visual noise while maximizing functionality.

Divider

Simple but essential, the Divider creates visual breathing room between sections.