Pagination
A navigation component that allows users to browse through pages.
Usage
import { Pagination, type PaginationProps } from '~/components/ui'
export const Demo = (props: PaginationProps) => {
return <Pagination {...props} count={90} pageSize={10} siblingCount={1} defaultPage={2} />
}
Installation
npx @park-ui/cli components add pagination1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/pagination.tsx
'use client'
import type { Assign } from '@ark-ui/react'
import { Pagination } from '@ark-ui/react/pagination'
import { type PaginationVariantProps, pagination } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(pagination)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
HTMLElement,
Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootProviderBaseProps>, PaginationVariantProps>
>(Pagination.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
HTMLElement,
Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootBaseProps>, PaginationVariantProps>
>(Pagination.Root, 'root')
export const Ellipsis = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, Pagination.EllipsisBaseProps>
>(Pagination.Ellipsis, 'ellipsis')
export const Item = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Pagination.ItemBaseProps>
>(Pagination.Item, 'item')
export const NextTrigger = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Pagination.NextTriggerBaseProps>
>(Pagination.NextTrigger, 'nextTrigger')
export const PrevTrigger = withContext<
HTMLButtonElement,
Assign<HTMLStyledProps<'button'>, Pagination.PrevTriggerBaseProps>
>(Pagination.PrevTrigger, 'prevTrigger')
export { PaginationContext as Context } from '@ark-ui/react/pagination'
import { type Assign, Pagination } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { type PaginationVariantProps, pagination } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from '~/lib/create-style-context'
const { withProvider, withContext } = createStyleContext(pagination)
export type RootProviderProps = ComponentProps<typeof RootProvider>
export const RootProvider = withProvider<
Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootProviderBaseProps>, PaginationVariantProps>
>(Pagination.RootProvider, 'root')
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<
Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootBaseProps>, PaginationVariantProps>
>(Pagination.Root, 'root')
export const Ellipsis = withContext<Assign<HTMLStyledProps<'div'>, Pagination.EllipsisBaseProps>>(
Pagination.Ellipsis,
'ellipsis',
)
export const Item = withContext<Assign<HTMLStyledProps<'button'>, Pagination.ItemBaseProps>>(
Pagination.Item,
'item',
)
export const NextTrigger = withContext<
Assign<HTMLStyledProps<'button'>, Pagination.NextTriggerBaseProps>
>(Pagination.NextTrigger, 'nextTrigger')
export const PrevTrigger = withContext<
Assign<HTMLStyledProps<'button'>, Pagination.PrevTriggerBaseProps>
>(Pagination.PrevTrigger, 'prevTrigger')
export { PaginationContext as Context } from '@ark-ui/solid'
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export * as Pagination from './pagination'2
Add Composition
Copy the code snippet below into ~/components/ui/pagination.tsx
'use client'
import { forwardRef } from 'react'
import { Pagination as ArkPagination } from '~/components/ui/primitives'
import { Button } from '~/components/ui/primitives'
import { IconButton } from '~/components/ui/primitives'
export interface PaginationProps extends ArkPagination.RootProps {}
export const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
return (
<ArkPagination.Root ref={ref} {...props}>
<ArkPagination.PrevTrigger asChild>
<IconButton variant="ghost" aria-label="Next Page">
<ChevronLeftIcon />
</IconButton>
</ArkPagination.PrevTrigger>
<ArkPagination.Context>
{(pagination) =>
pagination.pages.map((page, index) =>
page.type === 'page' ? (
<ArkPagination.Item key={index} {...page} asChild>
<Button variant="outline">{page.value}</Button>
</ArkPagination.Item>
) : (
<ArkPagination.Ellipsis key={index} index={index}>
…
</ArkPagination.Ellipsis>
),
)
}
</ArkPagination.Context>
<ArkPagination.NextTrigger asChild>
<IconButton variant="ghost" aria-label="Next Page">
<ChevronRightIcon />
</IconButton>
</ArkPagination.NextTrigger>
</ArkPagination.Root>
)
})
Pagination.displayName = 'Pagination'
const ChevronLeftIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Chevron Left Icon</title>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m15 18l-6-6l6-6"
/>
</svg>
)
const ChevronRightIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Chevron Right Icon</title>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m9 18l6-6l-6-6"
/>
</svg>
)
import { For } from 'solid-js'
import { Pagination as ArkPagination, Button, IconButton } from '~/components/ui/primitives'
export interface PaginationProps extends ArkPagination.RootProps {}
export const Pagination = (props: PaginationProps) => {
return (
<ArkPagination.Root {...props}>
<ArkPagination.PrevTrigger
asChild={(props) => (
<IconButton {...props} variant="ghost" aria-label="Next Page">
<ChevronLeftIcon />
</IconButton>
)}
/>
<ArkPagination.Context>
{(pagiation) => (
<For each={pagiation().pages}>
{(page, index) =>
page.type === 'page' ? (
<ArkPagination.Item
{...page}
asChild={(props) => <Button {...props} variant="outline" />}
>
{page.value}
</ArkPagination.Item>
) : (
<ArkPagination.Ellipsis index={index()}>…</ArkPagination.Ellipsis>
)
}
</For>
)}
</ArkPagination.Context>
<ArkPagination.NextTrigger
asChild={(props) => (
<IconButton {...props} variant="ghost" aria-label="Next Page">
<ChevronRightIcon />
</IconButton>
)}
/>
</ArkPagination.Root>
)
}
const ChevronLeftIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Chevron Left Icon</title>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m15 18l-6-6l6-6"
/>
</svg>
)
const ChevronRightIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Chevron Right Icon</title>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m9 18l6-6l-6-6"
/>
</svg>
)
Extend ~/components/ui/index.ts with the following line:
export * from './primitives'
export { Pagination, type PaginationProps } from './pagination'3
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { paginationAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'
export const pagination = defineSlotRecipe({
className: 'pagination',
slots: paginationAnatomy.keys(),
base: {
root: {
display: 'flex',
gap: '2.5',
},
item: {
fontVariantNumeric: 'tabular-nums',
},
ellipsis: {
alignItems: 'center',
color: 'fg.default',
display: 'inline-flex',
fontWeight: 'semibold',
px: '2',
},
},
})