Pagination

UI::Pagination

Page links for a long list, from a Pagy object.

bin/rails generate velvetkit:add pagination

Also adds: Icon Link
Stimulus: None, it's server-rendered
Installs: pagy

Examples

States

First page

Showing 1–25 of 240

Middle

Showing 101–125 of 240

Last page

Showing 226–240 of 240

Long range, collapsed

Showing 1226–1250 of 2500

Single page (renders nothing)

states.html.erb

<% examples = {
     "First page" => [240, 1],
     "Middle" => [240, 5],
     "Last page" => [240, 10],
     "Long range, collapsed" => [2500, 50],
     "Single page (renders nothing)" => [10, 1]
   } %>
<div class="flex flex-col gap-8">
  <% examples.each do |label, (count, page)| %>
    <div class="flex flex-col gap-2">
      <span class="text-xs text-muted-foreground"><%= label %></span>
      <%= render(UI::Pagination.new(pagy: Pagy::Offset.new(count: count, page: page, limit: 25))) %>
    </div>
  <% end %>
</div>

API

Arguments

UI::Pagination.new(pagy:, label: nil, class: nil, **html_attrs, &url_builder)

Notes

UI::Pagination — page links for a long list. Follows shadcn's structure (nav > ul > li > a, ghost links with the current page outlined) and takes a Pagy::Offset, so controllers stay conventional. The series is computed here rather than read from Pagy, whose own #series is protected in v43 and whose gap marker differs by version. Usage: <%= render(UI::Pagination.new(pagy: @pagy) { |page| section_path(@section, page: page) }) %>