paginationuiPage-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/pagination.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/pagination.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/pagination.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/pagination.jsonnpx shadcn-vue@latest add @uipkge/paginationInstalls to:app/components/ui/pagination/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class']; ariaLabel?: string | — | optional |
<script setup lang="ts">
import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PaginationRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
const props = defineProps<PaginationRootProps & { class?: HTMLAttributes['class']; ariaLabel?: string }>()
const emits = defineEmits<PaginationRootEmits>()
const delegated = reactiveOmit(props, 'class', 'as', 'ariaLabel')
const forwarded = useForwardPropsEmits(delegated, emits)
</script>
<template>
<PaginationRoot
v-slot="slotProps"
:as="props.as ?? 'nav'"
:aria-label="props.ariaLabel ?? 'Pagination'"
data-uipkge
data-slot="pagination"
v-bind="forwarded"
:class="cn('flex items-center gap-1', props.class)"
>
<slot v-bind="slotProps" />
</PaginationRoot>
</template>
<script setup lang="ts">
import { PaginationEllipsis as RkPaginationEllipsis } from 'reka-ui'
import { MoreHorizontal } from 'lucide-vue-next'
</script>
<template>
<RkPaginationEllipsis aria-hidden="true">
<slot>
<MoreHorizontal class="size-4" aria-hidden="true" />
</slot>
</RkPaginationEllipsis>
</template>
<script setup lang="ts">
import { PaginationFirst as RkPaginationFirst } from 'reka-ui'
import { ChevronsLeft } from 'lucide-vue-next'
</script>
<template>
<RkPaginationFirst aria-label="Go to first page"
><slot><ChevronsLeft class="size-4" aria-hidden="true" /></slot
></RkPaginationFirst>
</template>
<script setup lang="ts">
import { PaginationLast as RkPaginationLast } from 'reka-ui'
import { ChevronsRight } from 'lucide-vue-next'
</script>
<template>
<RkPaginationLast aria-label="Go to last page"
><slot><ChevronsRight class="size-4" aria-hidden="true" /></slot
></RkPaginationLast>
</template>
<script setup lang="ts">
import type { PaginationListProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { PaginationList as RkPaginationList } from 'reka-ui'
import { cn } from '@/lib/utils'
const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()
</script>
<template>
<RkPaginationList
v-slot="slotProps"
data-uipkge
data-slot="pagination-list"
v-bind="props"
:class="cn('flex items-center gap-1', props.class)"
>
<slot v-bind="slotProps" />
</RkPaginationList>
</template>
<script setup lang="ts">
import type { PaginationListItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PaginationListItem as RkPaginationListItem } from 'reka-ui'
import { cn } from '@/lib/utils'
const props = defineProps<PaginationListItemProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')
</script>
<template>
<RkPaginationListItem
data-uipkge
data-slot="pagination-list-item"
v-bind="delegated"
:class="cn('shrink-0', props.class)"
>
<slot />
</RkPaginationListItem>
</template>
<script setup lang="ts">
import { PaginationNext as RkPaginationNext } from 'reka-ui'
import { ChevronRight } from 'lucide-vue-next'
</script>
<template>
<RkPaginationNext aria-label="Go to next page"
><slot><ChevronRight class="size-4" aria-hidden="true" /></slot
></RkPaginationNext>
</template>
<script setup lang="ts">
import { PaginationPrev as RkPaginationPrev } from 'reka-ui'
import { ChevronLeft } from 'lucide-vue-next'
</script>
<template>
<RkPaginationPrev aria-label="Go to previous page"
><slot><ChevronLeft class="size-4" aria-hidden="true" /></slot
></RkPaginationPrev>
</template>
export { default as Pagination } from './Pagination.vue'
export { default as PaginationList } from './PaginationList.vue'
export { default as PaginationListItem } from './PaginationListItem.vue'
export { default as PaginationFirst } from './PaginationFirst.vue'
export { default as PaginationPrev } from './PaginationPrev.vue'
export { default as PaginationNext } from './PaginationNext.vue'
export { default as PaginationLast } from './PaginationLast.vue'
export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
Raw manifest:https://uipkge.dev/r/vue/pagination.json
