Pagination

'use client';

import { useState } from 'react';
import { Pagination } from '@/ui/Pagination';

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

  return (
    <div className="space-y-4">
      <p className="text-center text-sm text-grey">Current Page: {currentPage}</p>
      <Pagination
        defaultPage={currentPage}
        count={10}
        labels={{
          previous: 'Previous',
          next: 'Next',
        }}
        onChange={setCurrentPage}
      />
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/pagination.json
Copy

Usage

Copy'use client';
 
import { useState } from 'react';
import { Pagination } from '@/docs/lib/ui/pagination';
 
export function Component() {
  const [currentPage, setCurrentPage] = useState(1);
 
  return (
    <Pagination
      defaultPage={currentPage}
      count={10}
      labels={{
        previous: 'Previous',
        next: 'Next',
      }}
      onChange={setCurrentPage}
    />
  );
}

API Reference

Pagination

The component also accepts all standard HTML <nav> element attributes via HTMLAttributes<HTMLElement>.

Notes

• Responsive Design: The pagination automatically adjusts for mobile and desktop views. On mobile, fewer page buttons are shown with ellipsis indicators to save space.
• Accessibility: The component includes proper ARIA attributes including role="navigation", aria-label="pagination navigation", aria-controls="page-content", and aria-current="page" for the active page.
• Visual States: The active page is highlighted with a black circular button, while inactive pages use white circular buttons. Disabled previous/next buttons appear in grey.
• Ellipsis Display: When there are many pages, ellipsis (…) indicators appear to show there are more pages available. Different ellipsis are shown for mobile vs desktop breakpoints.
• Page Button Hiding: On mobile devices, some page buttons are automatically hidden to keep the UI compact while maintaining context of the current position.
• Navigation Buttons: Previous and next buttons include both icon and text label. The text labels are hidden on mobile but visible on desktop (controlled by buttonLabelClassName).
• Custom Pagination Logic: The paginationFactory prop allows you to provide a custom function for generating the pagination structure, enabling advanced use cases like server-side pagination or custom page ranges.
• Data Attributes: The component has data-name="Pagination" for testing and debugging purposes.
• Client Component: This is a client component (uses "use client" directive) as it requires interactivity for page navigation.