Klarhimmel UI
Klarhimmel ↗

Pagination

Stable

Page navigation with Previous, Next and numbered pages, as buttons or as plain links.

npx shadcn add @klarhimmel/pagination

When to use

  • Use for

    A list split over pages, with the current page and a way to move.

  • Not for

    Endless feeds, or fewer than two pages (render nothing).

  • Pairs with

    Table, lists, Cards.

Preview

Showing bookings 81 to 100

pagination.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Pagination } from '@/components/klarhimmel/ui/pagination';

export default function Example() {
  return (
    <Theme theme="brand">
      // links work without script: each page is its own address
      <Pagination page={3} pageCount={12} href={(n) => `/rooms?page=${n}`} />
    </Theme>
  );
}

Install

Import

import { Pagination, pageRange } from '@/components/klarhimmel/ui/pagination';
Lands in
components/klarhimmel/ui/pagination.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Links

    import { Pagination } from '@/components/klarhimmel/ui/pagination';

export default function PaginationLinks() {
  return (
    <div className="flex w-[min(40rem,calc(100cqw-3rem))] flex-col items-center gap-6">
      <Pagination page={1} pageCount={6} href={(n) => `/rooms?page=${n}`} label="Room pages" />
      <Pagination page={6} pageCount={6} href={(n) => `/rooms?page=${n}`} label="Last page" />
    </div>
  );
}

  • Edges

    import { Pagination } from '@/components/klarhimmel/ui/pagination';

export default function PaginationEdges() {
  return (
    <div className="flex w-[min(40rem,calc(100cqw-3rem))] flex-col items-center gap-6">
      <Pagination page={2} pageCount={3} href={(n) => `?page=${n}`} label="Three pages" />
      <Pagination page={20} pageCount={40} href={(n) => `?page=${n}`} label="Forty pages" siblings={2} />
    </div>
  );
}

API reference

PropTypeDefaultDescription
pagenumber-Required. The current page, starting at 1.
pageCountnumber-Required. How many pages there are.
onPageChange(page: number) => void-Buttons mode.
href(page: number) => string-Links mode. The URL of a page; passes through safeHref.
siblingsnumber1Pages shown either side of the current one.
labelstring'Pagination'Accessible name of the navigation landmark.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves through the page links or buttons
Enter / SpaceGoes to the page

The current page has aria-current="page". Previous and Next stay as disabled buttons at the ends. Use links when every page has its own address.

Accessibility