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 your picked 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.env.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. Then copy the CSS Override field and paste it in your own CSS.

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-04-13