Pagination Themes

Render the same pagination result with the default bundle CSS, Tailwind utility classes, or a focused application theme override.

ux.symfony.com

Bundle CSS

Default

Utility classes

Tailwind

Two block overrides

Application

← Back
1
2
3
8
Continue →

Choose a complete theme

Pass a theme template to ux_pagination(). The Tailwind theme changes the generated markup and utility classes, while the pagination result and its URLs remain exactly the same.

Theme names come from application code, not from untrusted request values.

templates/demos/pagination/themes.html.twig

{{ ux_pagination(
    pagination,
    theme: '@UXPagination/theme/tailwind.html.twig',
    show_info: false,
) }}

Override only what changes

An application theme can extend a built-in theme and replace a focused Twig block. Here, previous_label and next_label produce the Back and Continue labels visible in the third row.

Everything else keeps the default accessible markup and behavior.

templates/pagination/application.html.twig

{% extends '@UXPagination/theme/default.html.twig' %}

{% block previous_label %}&larr; Back{% endblock %}

{% block next_label %}Continue &rarr;{% endblock %}

Author smnandre

Published 2026-09-21