Data

TwPagination

TwPagination is a Blazor pagination component. Bind ActivePage and PageSize, set TotalPages and ShowPageSize to split content across pages.

Last updated 25 September 2026

Basic Usage

Bind ActivePage to track the current page as the user clicks between pages. TotalPages controls how many pages are available.

Page 1 of 10

Razor

<TwPagination TotalPages="10" @bind-ActivePage="activePage" AriaLabel="Basic pagination" />
<p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Page <strong>@activePage</strong> of <strong>10</strong></p>

CSHARP

@code {
    private int activePage = 1;
}

Responding to Page Changes

Use ActivePageChanged instead of two-way binding when you need to run logic - such as loading new data - whenever the page changes.

Showing results for page 1.

Razor

<TwPagination TotalPages="6" ActivePage="pageChangedActivePage" ActivePageChanged="OnActivePageChanged" AriaLabel="Pagination with change handler" />
<p class="mt-3 text-sm text-gray-600 dark:text-gray-400">@pageChangedMessage</p>

CSHARP

@code {
    private int pageChangedActivePage = 1;
    private string pageChangedMessage = "Showing results for page 1.";
    
    private void OnActivePageChanged(int page)
    {
        pageChangedActivePage = page;
        pageChangedMessage = $"Showing results for page {page}.";
    }
}

Dense

Set Dense to render smaller, more compact buttons, useful for tight layouts such as beneath a table. The optional page size selector becomes dense too.

Razor

<TwPagination TotalPages="10" Dense="true" @bind-ActivePage="denseActivePage" ShowPageSize="true" @bind-PageSize="densePageSize" AriaLabel="Dense pagination" />

CSHARP

@code {
    private int denseActivePage = 1;
    private int densePageSize = 10;
}

Page Size Selector

Set ShowPageSize to add an optional "items per page" dropdown alongside the pagination controls. Bind PageSize and customize PageSizeOptions to control the available choices.

Page 1 of 12, showing 10 items per page.

Razor

<TwPagination TotalPages="12" @bind-ActivePage="pageSizeActivePage" ShowPageSize="true" @bind-PageSize="pageSize" AriaLabel="Pagination with page size selector" />
<p class="mt-3 text-sm text-gray-600 dark:text-gray-400">Page <strong>@pageSizeActivePage</strong> of 12, showing <strong>@pageSize</strong> items per page.</p>

CSHARP

@code {
    private int pageSizeActivePage = 1;
    private int pageSize = 10;
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwPaginationTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`List`	string
`Base`	string
`Size`	string
`DenseSize`	string
`Buttons`	string
`ActiveButton`	string

Full reference: TwPaginationTheme on the API docs.