Primitives

Pagination

The row keeps its width as you move. outline, pill, gradient, underline, dots, jumper, minimal; the range and page size.

outline · with the range and page size

pill · the current page slides · first and last

gradient · the current page glows

underline · a bar slides under the page

dots · short sets, onboarding

jumper · type a page and press Enter

minimal · for phones and narrow panels

pagination.tsx

"use client";

import { Pagination } from "@waveinno/ui";
import * as React from "react";

export default function PaginationDemo() {
  const [page, setPage] = React.useState(4);
  const [size, setSize] = React.useState(20);
  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <p className="text-[12px] text-muted">outline · with the range and page size</p>
        <Pagination page={page} onPageChange={setPage} total={312} pageSize={size} pageSizes={[10, 20, 50]} onPageSizeChange={(s) => (setSize(s), setPage(1))} />
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">pill · the current page slides · first and last</p>
        <Pagination variant="pill" page={page} onPageChange={setPage} pageCount={16} edges />
      </div>
      <div className="grid gap-6 lg:grid-cols-2">
        <div className="space-y-2 lg:col-span-2">
          <p className="text-[12px] text-muted">gradient · the current page glows</p>
          <Pagination variant="gradient" page={page} onPageChange={setPage} pageCount={16} />
        </div>
        <div className="space-y-2">
          <p className="text-[12px] text-muted">underline · a bar slides under the page</p>
          <Pagination variant="underline" page={page} onPageChange={setPage} pageCount={16} />
        </div>
        <div className="space-y-2">
          <p className="text-[12px] text-muted">dots · short sets, onboarding</p>
          <Pagination variant="dots" page={Math.min(page, 6)} onPageChange={setPage} pageCount={6} />
        </div>
        <div className="space-y-2">
          <p className="text-[12px] text-muted">jumper · type a page and press Enter</p>
          <Pagination variant="jumper" page={page} onPageChange={setPage} pageCount={120} edges />
        </div>
      </div>
      <div className="space-y-2">
        <p className="text-[12px] text-muted">minimal · for phones and narrow panels</p>
        <Pagination variant="minimal" page={page} onPageChange={setPage} pageCount={16} size="sm" />
      </div>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Pagination } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

src/components/ui/pagination.tsx

Prop	Type	Default	Description
`page`required	`number`	—
`onPageChange`required	`(page: number) => void`	—
`pageCount`	`number`	—	Number of pages. Or give `total` and `pageSize`.
`total`	`number`	—	Number of rows in all; shows "21–40 of 312".
`pageSize`	`number`	`20`
`pageSizes`	`number[]`	—	Offer these page sizes; needs `onPageSizeChange`.
`onPageSizeChange`	`(size: number) => void`	—
`variant`	`"outline" \| "pill" \| "gradient" \| "underline" \| "dots" \| "jumper" \| "minimal"`	`"outline"`
`siblings`	`number`	`1`
`edges`	`boolean`	`false`	First / last page buttons.
`size`	`"sm" \| "md"`	`"md"`
`labels`	`{ previous?: string; next?: string; page?: string; of?: string; perPage?: string; goTo?: string }`	—
`className`	`string`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui

Import#

Props#

<Pagination>

Install#