Pagination

The Pagination component allows users to navigate through multiple pages of content with an accessible and customizable interface. It’s perfect for tables, search results, and any content that spans multiple pages.

Usage

<script>
  import { 
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationPrevButton,
    PaginationNextButton,
    PaginationEllipsis
  } from "$lib/components/ui/pagination";
  
  let currentPage = 1;
</script>

<Pagination bind:page={currentPage} count={100} perPage={10}>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevButton />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink page={{ value: 1 }} />
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink page={{ value: 10 }} />
    </PaginationItem>
    <PaginationItem>
      <PaginationNextButton />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Basic Pagination

A simple pagination component with page numbers and navigation buttons.

With Ellipsis

A pagination component with ellipsis for large page counts.

Compact

A more compact pagination component with fewer visible pages.

Custom Navigation Buttons

A pagination component with customized navigation buttons.

With Content Info

A pagination component with information about the current page and total items.

Showing 11 to 20 of 45 results

Auto Generated Pages

A pagination component that generates page links automatically based on the current page and total pages.

API Reference

Pagination Components

Component	Description
`Pagination`	The root component that manages pagination state.
`PaginationContent`	The container for pagination items.
`PaginationItem`	A wrapper for pagination links, buttons, or ellipsis.
`PaginationLink`	A link to a specific page.
`PaginationPrevButton`	A button to navigate to the previous page.
`PaginationNextButton`	A button to navigate to the next page.
`PaginationEllipsis`	An indicator for omitted pages.

Pagination Properties

Property	Type	Default	Description
`page`	`number`	`1`	The current active page.
`count`	`number`	`0`	The total number of items.
`perPage`	`number`	`10`	The number of items per page.
`siblingCount`	`number`	`1`	The number of siblings to show on each side of the current page when using auto-generation.
`class`	`string`	`undefined`	Custom CSS classes.
`onPageChange`	`function`	`undefined`	Callback fired when the page changes.

PaginationLink Properties

Property	Type	Default	Description
`page`	`{ value: number }`	Required	The page object with its value.
`isActive`	`boolean`	`false`	Whether the link is for the current active page.
`size`	`"default" \\| "sm" \\| "lg" \\| "icon"`	`"icon"`	The size of the link button.
`class`	`string`	`undefined`	Custom CSS classes.

PaginationPrevButton/PaginationNextButton Properties

Property	Type	Default	Description
`class`	`string`	`undefined`	Custom CSS classes.
`disabled`	`boolean`	`false`	Whether the button is disabled (auto-disabled when on first/last page).
`children`	`function`	Default icon	Custom content for the button.

Implementation

The Pagination component is built on top of bits-ui primitives. It leverages button variants for styling and integrates with Lucide icons for navigation buttons and ellipsis. Here’s a look at how some components are implemented:

<!-- Pagination root styling -->
<PaginationPrimitive.Root
  class={cn("mx-auto flex w-full flex-col items-center")}
  {count}
  {perPage}
  {siblingCount}
  bind:page
/>

<!-- PaginationContent styling -->
<ul class={cn("flex flex-row items-center gap-1")}>
  {@render children?.()}
</ul>

<!-- PaginationLink styling (using button variants) -->
<PaginationPrimitive.Page
  {page}
  class={cn(
    buttonVariants({
      variant: isActive ? "outline" : "ghost",
      size,
    })
  )}
/>

The component also provides automatic page generation through the createPagination helper function from bits-ui, which generates an array of page objects with appropriate ellipsis indicators based on the current page, total pages, and desired sibling count.