Skip to main content
Sync UI offers a variety of pagination animation styles to enhance your user interface and provide intuitive navigation through paginated content.

Features

  • Multiple animation styles (fading, sliding, expanding)
  • Numbered pagination with ellipsis
  • Simple prev/next navigation
  • Compact with first/last controls
  • Dropdown for page and rows selection
  • Rows per page configuration
  • Responsive design
  • Theme-aware styling

Variants

Simple

A minimal pagination style with basic navigation controls. Features:
  • Page counter (Page X of Y)
  • Previous/Next buttons
  • Disabled state handling
  • Border styling
  • Hover animations

Numbered

Traditional pagination with visible page numbers and navigation controls. Features:
  • Clickable page numbers
  • Ellipsis for truncation
  • Smart page number display
  • Active page highlighting
  • Hover/tap animations

Compact

A space-efficient pagination style with first/last page controls. Features:
  • First/Last page buttons
  • Previous/Next navigation
  • Grouped border design
  • Page number display
  • Compact layout

With Dropdown

Pagination with dropdown controls for page selection and rows per page. Features:
  • Rows per page dropdown
  • Page selection dropdown
  • Configurable options (10, 25, 50, 100)
  • Combined navigation
  • Flexible layout

Rows Per Page

Pagination with rows per page selection and item range display. Features:
  • Rows per page selector
  • Range display (X-Y of Z)
  • Configurable row options
  • Centered layout
  • Clean typography

Fading

A smooth fade animation when transitioning between pages. Features:
  • Fade in/out animation
  • Y-axis motion
  • AnimatePresence mode
  • Smooth transitions
  • Minimal design

Sliding

A horizontal sliding animation between page numbers. Features:
  • Horizontal slide animation
  • Spring physics
  • Scale effect on active page
  • Continuous strip display
  • Smooth scrolling

Expanding

An expanding/collapsing animation for page indicators. Features:
  • Width expansion on active
  • Dot indicators for inactive
  • Number display for active
  • Smooth width transitions
  • Interactive hover effects

Build docs developers (and LLMs) love