Pagination

Page navigation with dot notation, Previous/Next links, ellipsis, and active page state.

Preview

Installation

npx drivn add pagination

Usage

1 import { Pagination } from "@/components/ui/pagination"
2 
3 export default function Page() {
4   return (
5     <Pagination>
6       <Pagination.Content>
7         <Pagination.Item>
8           <Pagination.Previous href="#" />
9         </Pagination.Item>
10         <Pagination.Item>
11           <Pagination.Link href="#">1</Pagination.Link>
12         </Pagination.Item>
13         <Pagination.Item>
14           <Pagination.Link href="#" isActive>
15             2
16           </Pagination.Link>
17         </Pagination.Item>
18         <Pagination.Item>
19           <Pagination.Link href="#">3</Pagination.Link>
20         </Pagination.Item>
21         <Pagination.Item>
22           <Pagination.Next href="#" />
23         </Pagination.Item>
24       </Pagination.Content>
25     </Pagination>
26   )
27 }

With Ellipsis

Show gaps in long page ranges with an ellipsis indicator.

API Reference

Pagination

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes for the nav wrapper.
`children`	ReactNode	—	Pagination.Content and its child sub-components.

Pagination.Content

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes for the list container.
`children`	ReactNode	—	Pagination.Item elements.

Pagination.Item

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes for the list item.
`children`	ReactNode	—	A Pagination.Link, Previous, Next, or Ellipsis.

Pagination.Link

Prop	Type	Default	Description
`isActive`	boolean	false	Highlights the link as the current page.
`href`	string	—	Navigation URL for this page link.
`className`	string	—	Additional CSS classes to apply.
`children`	ReactNode	—	Page number or label.

Pagination.Previous

Prop	Type	Default	Description
`href`	string	—	URL for the previous page.
`className`	string	—	Additional CSS classes to apply.
`children`	ReactNode	—	Custom label. Defaults to "Previous".

Pagination.Next

Prop	Type	Default	Description
`href`	string	—	URL for the next page.
`className`	string	—	Additional CSS classes to apply.
`children`	ReactNode	—	Custom label. Defaults to "Next".

Pagination.Ellipsis

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes to apply.

1	import { Pagination } from "@/components/ui/pagination"
2
3	export default function Page() {
4	return (
5	<Pagination>
6	<Pagination.Content>
7	<Pagination.Item>
8	<Pagination.Previous href="#" />
9	</Pagination.Item>
10	<Pagination.Item>
11	<Pagination.Link href="#">1</Pagination.Link>
12	</Pagination.Item>
13	<Pagination.Item>
14	<Pagination.Link href="#" isActive>
15	2
16	</Pagination.Link>
17	</Pagination.Item>
18	<Pagination.Item>
19	<Pagination.Link href="#">3</Pagination.Link>
20	</Pagination.Item>
21	<Pagination.Item>
22	<Pagination.Next href="#" />
23	</Pagination.Item>
24	</Pagination.Content>
25	</Pagination>
26	)
27	}