Pagination - HapplyUI

A pagination component with three visual variants and support for both button and link-based navigation.

Installation

bunx @happlyui/cli@latest add pagination

Dependencies

npm packages

@radix-ui/react-slot
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
polymorphic
recursive-clone-children
tv

Usage

import * as Pagination from "@/components/ui/pagination"

<Pagination.Root>
  <Pagination.NavButton>
    <Pagination.NavIcon as={RiArrowLeftSLine} />
  </Pagination.NavButton>
  <Pagination.Item current>1</Pagination.Item>
  <Pagination.Item>2</Pagination.Item>
  <Pagination.NavButton>
    <Pagination.NavIcon as={RiArrowRightSLine} />
  </Pagination.NavButton>
</Pagination.Root>

Examples

Demo

Basic variant pagination with navigation buttons and page items.

<Pagination.Root>
  <Pagination.NavButton>
    <Pagination.NavIcon as={RiArrowLeftSLine} />
  </Pagination.NavButton>
  <Pagination.Item current>4</Pagination.Item>
  <Pagination.NavButton>
    <Pagination.NavIcon as={RiArrowRightSLine} />
  </Pagination.NavButton>
</Pagination.Root>

Rounded

Rounded variant with fully circular buttons and items.

<Pagination.Root variant="rounded">
  ...
</Pagination.Root>

Group

Group variant with connected items separated by dividers.

<Pagination.Root variant="group">
  ...
</Pagination.Root>

As Link

Pagination items rendered as anchor links using the asChild pattern.

1 2 3 4 516

<Pagination.Item asChild>
  <a href="/page/1">1</a>
</Pagination.Item>

API Reference

Pagination.Root

The container for pagination items. Propagates variant to children.

Prop	Type	Default	Description
`variant`	`'basic' \| 'rounded' \| 'group'`	`'basic'`	The visual variant
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Pagination.Item

A page number button. Renders as a button by default.

Prop	Type	Default	Description
`current`	`boolean`	`false`	Whether this is the current active page
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Pagination.NavButton

A navigation button for prev/next actions.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Pagination.NavIcon

A polymorphic icon inside a NavButton.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render