---
url: "https://vueda.dev/v3/reference/theming/keys/PaginationFooter.md"
title: "PaginationFooter"
---

# PaginationFooter

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Class forwarded to the embedded [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner [PaginationFooter.layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) owns the responsive arrangement.

Vue component: [PaginationFooter](/v3/reference/api/vue/PaginationFooter.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-root) |  | Class forwarded to the embedded [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner [PaginationFooter.layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) owns the responsive arrangement. |
| [layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) | `flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-between` | Footer arrangement inside the bar. Read-out group and navigation cluster sit on one row split to the edges from `sm` up (`justify-between`); below `sm` they wrap and center so the read-out and selector form a centered row above the navigation row. |
| [summary](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-summary) | `flex flex-wrap items-center justify-center gap-x-4 gap-y-1` | Read-out group: the [PaginationMeta](/v3/reference/theming/keys/PaginationMeta.md) range string and the rows-per-page selector, grouped together (the mockup's left cluster). Wraps and centers on narrow viewports. |
| [rowsPerPage](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-rowsPerPage) | `flex items-center gap-1.5 text-[length:var(--vueda-text-supporting)] text-muted-foreground` | Rows-per-page label wrapping the `NativeSelect`. Supporting-size muted label so the selector reads as secondary chrome beside the read-out. |
| [paginator](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-paginator) | `shrink-0` | Class forwarded to the embedded [Pagination](/v3/reference/theming/keys/Pagination.md) navigation cluster (first / previous / page-report / next / last). `shrink-0` keeps the cluster intact; the component strips the primitive's `w-full` via a theme override so it sizes to its content rather than claiming a full row. |
| [rangeEmphasis](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-rangeEmphasis) | `font-medium text-foreground` | Emphasis span wrapping the numeric figures in the range read-out (the row range and the total record count). Lifts those figures from the read-out's muted tone to `text-foreground` at `font-medium` so the meaningful counts pop against the muted label, matching the weight of the `Page N of M` report. |
| [pageReport](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-pageReport) | `px-2 font-mono text-[length:var(--vueda-text-supporting)] font-medium tabular-nums text-foreground` | Mono "Page N of M" indicator between the previous and next controls; tabular for stable numeric width. `font-medium` so the figures carry the same weight as the emphasized range read-out. |

<a id="theme-key-PaginationFooter-root"></a>

## root

> Class forwarded to the embedded [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner [PaginationFooter.layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) owns the responsive arrangement.

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:16`

<a id="theme-key-PaginationFooter-layout"></a>

## layout

> Footer arrangement inside the bar. Read-out group and navigation cluster sit on one row split to the edges from `sm` up (`justify-between`); below `sm` they wrap and center so the read-out and selector form a centered row above the navigation row.

Default classes:

`flex w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-between`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:20`

<a id="theme-key-PaginationFooter-summary"></a>

## summary

> Read-out group: the [PaginationMeta](/v3/reference/theming/keys/PaginationMeta.md) range string and the rows-per-page selector, grouped together (the mockup's left cluster). Wraps and centers on narrow viewports.

Default classes:

`flex flex-wrap items-center justify-center gap-x-4 gap-y-1`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:24`

<a id="theme-key-PaginationFooter-rowsPerPage"></a>

## rowsPerPage

> Rows-per-page label wrapping the `NativeSelect`. Supporting-size muted label so the selector reads as secondary chrome beside the read-out.

Default classes:

`flex items-center gap-1.5 text-[length:var(--vueda-text-supporting)] text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:28`

<a id="theme-key-PaginationFooter-paginator"></a>

## paginator

> Class forwarded to the embedded [Pagination](/v3/reference/theming/keys/Pagination.md) navigation cluster (first / previous / page-report / next / last). `shrink-0` keeps the cluster intact; the component strips the primitive's `w-full` via a theme override so it sizes to its content rather than claiming a full row.

Default classes:

`shrink-0`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:32`

<a id="theme-key-PaginationFooter-rangeEmphasis"></a>

## rangeEmphasis

> Emphasis span wrapping the numeric figures in the range read-out (the row range and the total record count). Lifts those figures from the read-out's muted tone to `text-foreground` at `font-medium` so the meaningful counts pop against the muted label, matching the weight of the `Page N of M` report.

Default classes:

`font-medium text-foreground`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:36`

<a id="theme-key-PaginationFooter-pageReport"></a>

## pageReport

> Mono "Page N of M" indicator between the previous and next controls; tabular for stable numeric width. `font-medium` so the figures carry the same weight as the emphasized range read-out.

Default classes:

`px-2 font-mono text-[length:var(--vueda-text-supporting)] font-medium tabular-nums text-foreground`

Source: `client/lib/theme/vueda-tailwind/navigation/PaginationFooter.theme.js:40`