Jump-to-page navigation

The jump-to Pagination variant for long result sets — type a page number and press Enter to leap directly there. Out-of-range entries clamp to bounds.

Pagination

Preview

Viewing page 1 of 250

Source

apps/docs/app/recipes/pagination-jump-to/recipe.tsx

'use client';

import { useState } from 'react';
import { Pagination } from '@hey-mike/tungsten';

export default function PaginationJumpToRecipe() {
  const [page, setPage] = useState(1);
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-ink-2 text-sm tabular-nums">Viewing page {page} of 250</p>
      <Pagination variant="jump-to" totalPages={250} page={page} onPageChange={setPage} />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Pagination } from '@hey-mike/tungsten';

export default function PaginationJumpToRecipe() {
  const [page, setPage] = useState(1);
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-ink-2 text-sm tabular-nums">Viewing page {page} of 250</p>
      <Pagination variant="jump-to" totalPages={250} page={page} onPageChange={setPage} />
    </div>
  );
}