Stylesheets 💚 Pagy

Stylesheets

Pagy includes a couple of CSS files and the tools to integrate with your app's themes interactively.

You don't need any stylesheets if you use the pagy :bootstrap or :bulma helpers and styles.

Setup

Good for any app

pagy.css
.pagy {
  /* PagyWand Generated Variables */
  /* Copy from the PagyWand "CSS Override" field, and paste in YOUR own CSS to override the style */
  --B: 1;
  --H: 0;
  --S: 0;
  --L: 50;
  --A: 1;
  --spacing: 0.125rem;
  --padding: 0.75rem;
  --rounding: 1.75rem;
  --border-width: 0rem;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  /* Calculated Color Variables */
  --text:               hsl(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
  --text-hover:         hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
  --text-current:       hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
  --background:         hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
  --background-hover:   hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
  --background-current: hsl(var(--H) var(--S) var(--L) / var(--A));
  --background-input:   hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

  /* Base Properties */
  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
}

/* Element Rules */

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) { /* all but gaps */
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 3) var(--padding);
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover { /* all links on hover */
  background-color: var(--background-hover);
  color: var(--text-hover)
}

.pagy a:not([href]) { /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
  opacity: .6;
}

.pagy a[aria-current] {  /* current page */
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--text);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
}

Works only with apps using tailwind

pagy-tailwind.css
@import "tailwindcss";

@layer components {
  .pagy {
    /* PagyWand Generated Variables */
    /* Copy from the PagyWand "CSS Override" field, and paste in YOUR own CSS to override the style */
    --B: 1;
    --H: 0;
    --S: 0;
    --L: 50;
    --A: 1;
    --spacing: 0.125rem;
    --padding: 0.75rem;
    --rounding: 1.75rem;
    --border-width: 0rem;
    --font-size: 0.875rem;
    --font-weight: 600;
    --line-height: 1.75;

    /* Calculated Color Variables */
    --text:               hsl(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
    --text-hover:         hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
    --text-current:       hsl(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
    --background:         hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
    --background-hover:   hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
    --background-current: hsl(var(--H) var(--S) var(--L) / var(--A));
    --background-input:   hsl(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

    /* Base Properties */
    @apply flex gap-x-[var(--spacing)] font-[var(--font-weight)]
    text-[length:var(--font-size)] text-[var(--text)]
    leading-[var(--line-height)];

    /* Element Rules */

    a:not([role="separator"]) { /* all but gaps */
      @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)]
      border-solid  border-[var(--background-current)] border-[length:var(--border-width)];
    }

    a[href]:hover { /* all links on hover */
      @apply bg-[var(--background-hover)] text-[var(--text-hover)];
    }

    a:not([href]) { /* all but links */
      @apply cursor-default
    }

    a[role="link"]:not([aria-current]) { /* disabled links */
      @apply opacity-[.6];
    }

    a[aria-current] {  /* current page */
      @apply bg-[var(--background-current)] text-[var(--text-current)];
    }

    label {
      @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
      py-[calc(var(--padding)/3-var(--border-width))]
      bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-current)];

      input {
        @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
        font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-current)];
      }
    }
  }
}

Works with any app

The following statement will copy and keep synced the pagy* file in your own app/stylesheets dir (or any dir you may want use).

It will become and processed exactly like one of your own files.

pagy.rb initializer

# Replace 'pagy*' with the file you picked
Pagy.sync(:stylesheet, Rails.root.join('app/stylesheets'), 'pagy*') if Rails.development?

If you prefer to sync manually or during an automation step, you can define your own task with a single line in the Rakefile, or any *.rake file:

# Pagy::SyncTask.new(resource, destination, *targets)
# Replace 'pagy*' with the file you picked
Pagy::SyncTask.new(:stylesheet, Rails.root.join('app/stylesheets'), 'pagy*')

and exec it with...

bundle exec rake pagy:sync:stylesheet

Works only with apps with an assets pipeline

Rails.application.config.assets.paths << Pagy::ROOT.join('stylesheets')

Add this line to any template <head>...

<%== Pagy.dev_tools %>

and adjust a few sliders to see the change in real time, right in your app, with the Pagy Wand

To ensure a minimalistic valid output, complete with all the ARIA attributes, pagy outputs a single line with the minimum number of tags and attributes required to identify all the parts of the nav bars:

The output of series_nav and series_nav_js helpers, is a series of a tags inside a nav tag wrapper.
The disabled links are so because they are missing the href attributes.
The pagy nav and pagy nav-js classes are assigned to the nav tag.

Check it out with bundle exec pagy demo

You can target the gap with .pagy a:[role="separator"]
You can target the previous and next links by using .pagy a:first-child and .pagy a:last-child pseudo classes
Check the stylesheet comments to target other specific elements.

The pagy stylesheets automatically support Right-To-Left (RTL) languages. It respects the standard dir="rtl" attribute of the html tag or any parent element of the pagination.

Last updated on 2026-03-25