Styled Pagination

Learn how to customize the appearance of your pagination component using various styling options.

Examples

Styled Pagination

Custom styling with different variants and colors

function StyledExample() {
  return (
    <div className="flex flex-col gap-4">
      {/* Large size, primary variant */}
      <Pagination
        totalItems={100}
        defaultPageSize={5}
        size="lg"
        variant="primary"
        color="primary"
        onChange={({ currentPage, pageSize }) => {
          // Handle page change
        }}
      />
 
      {/* Medium size, outline variant, secondary color */}
      <Pagination
        totalItems={100}
        defaultPageSize={5}
        size="md"
        variant="outline"
        color="secondary"
        rounded="full"
        onChange={({ currentPage, pageSize }) => {
          // Handle page change
        }}
      />
    </div>
  );
}

Styling Options

Size Variants

The component supports three size variants:

sm: Small size, suitable for compact layouts
md: Medium size (default), balanced for most use cases
lg: Large size, great for touch interfaces

<Pagination size="sm" />
<Pagination size="md" />
<Pagination size="lg" />

Color Variants

Choose between different color schemes:

primary: Main brand color (default)
secondary: Alternative color scheme

<Pagination color="primary" />
<Pagination color="secondary" />

Button Variants

Two button styles are available:

solid: Filled background (default)
outline: Bordered style

<Pagination variant="solid" />
<Pagination variant="outline" />

Border Radius

Customize the corner roundness:

sm: Slight rounding
md: Medium rounding (default)
lg: Large rounding
full: Fully rounded

<Pagination rounded="sm" />
<Pagination rounded="md" />
<Pagination rounded="lg" />
<Pagination rounded="full" />

Tailwind CSS Integration

The component is built with Tailwind CSS and uses the theme plugin for consistent styling. You can customize the colors and other properties by modifying your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          // your custom primary colors
        },
        secondary: {
          // your custom secondary colors
        }
      }
    }
  }
}

Best Practices

Consistency: Maintain consistent styling across your application
Accessibility: Ensure sufficient color contrast for all variants
Responsive Design: Test different sizes on various screen sizes
Theme Integration: Align with your application's design system

Styled Pagination

Styled Pagination

On this page