Docs/Pagination

Pagination

Page navigation with previous/next and numbered items.

Usage

tsx

1import { Pagination, PaginationItem, PaginationPrevious, PaginationNext } from '@storm-ds/ui'
2
3<Pagination>
4  <PaginationPrevious />
5  <PaginationItem>1</PaginationItem>
6  <PaginationItem active>2</PaginationItem>
7  <PaginationItem>3</PaginationItem>
8  <PaginationNext />
9</Pagination>

Default

With Ellipsis

tsx

1<Pagination>
2  <PaginationPrevious />
3  <PaginationItem>1</PaginationItem>
4  <PaginationEllipsis />
5  <PaginationItem active>5</PaginationItem>
6  <PaginationEllipsis />
7  <PaginationItem>10</PaginationItem>
8  <PaginationNext />
9</Pagination>

Disabled

Compact

Props

Prop	Type	Default	Description
active	boolean	false	Marks current page (PaginationItem)
disabled	boolean	false	Disables the item
size	'sm' \| 'md' \| 'lg'	'md'	Item size (PaginationItem)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Pagination. Import: `import { Pagination, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@storm-ds/ui'`. All items are buttons (not links). Use active prop for current page, disabled prop to disable items. Use PaginationEllipsis for truncated page ranges. Use size prop on PaginationItem for sm/md/lg. Example: `<Pagination><PaginationPrevious /><PaginationItem>1</PaginationItem><PaginationEllipsis /><PaginationItem active>5</PaginationItem><PaginationNext /></Pagination>`

Breadcrumb

NavigationMenu