Pagination

Page controls with prev/next and ellipsis.

Colors

Sizes

Real use · interactive search results

Showing page 4 of 12 — 118 results

Using Pagination

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Pagination — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class pagination, with 16 modifiers:

.pagination
.pagination-accent
.pagination-ellipsis
.pagination-error
.pagination-info
.pagination-item
.pagination-item-active
.pagination-lg
.pagination-md
.pagination-neutral
.pagination-primary
.pagination-secondary
.pagination-sm
.pagination-success
.pagination-warning
.pagination-xl
.pagination-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Pagination } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
page	number	yes	Current page (1-based).
count	number	yes	Total number of pages.
onValueChange	(page: number) => void	no	Called with the new page.
onChange	(page: number) => void	no	@deprecated Use onValueChange. onChange is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change.
siblingCount	number	no	Pages shown on each side of the current page. Default 1.
boundaryCount	number	no	Pages shown at the start/end. Default 1.
controls	boolean	no	Show prev/next arrows. Default true.
color	PaginationColor	no	—
size	PaginationSize	no	—

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { Pagination } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";
import { COLORS } from "../lib/data";

export function PaginationDemo() {
    const [page, setPage] = useState(4);

    return (
        <>
            <Section title="Colors">
                <div className="flex flex-col gap-3">
                    {COLORS.slice(0, 6).map((color) => (
                        <Pagination
                            key={color}
                            color={color}
                            page={3}
                            count={10}
                            onValueChange={() => {}}
                        />
                    ))}
                </div>
            </Section>

            <Section title="Sizes">
                <div className="flex flex-col gap-3">
                    {(["xs", "sm", "md", "lg"] as const).map((size) => (
                        <Pagination
                            key={size}
                            size={size}
                            color="primary"
                            page={3}
                            count={10}
                            onValueChange={() => {}}
                        />
                    ))}
                </div>
            </Section>

            <Section title="Real use · interactive search results">
                <div className="flex max-w-lg flex-col gap-3">
                    <p className="text-sm opacity-70">
                        Showing page {page} of 12 — 118 results
                    </p>
                    <Pagination
                        color="primary"
                        page={page}
                        count={12}
                        onValueChange={setPage}
                    />
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Pagination — a joined button row (1…props.pages), the first marked active. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Pagination", "pagination", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "pagination pagination-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Pagination, on every path, is available through the Silica MCP server.