Pagination

Installation

$ 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.json

Examples

Props

Dependencies

Files (9)

• app/components/ui/pagination/Pagination.vue 0.8 kB

  <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')
  const forwarded = useForwardPropsEmits(delegated, emits)
  </script>
  
  <template>
    <PaginationRoot
      v-slot="slotProps"
      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>

• app/components/ui/pagination/PaginationEllipsis.vue 0.2 kB

  <script setup lang="ts">
  import { PaginationEllipsis as RkPaginationEllipsis } from 'reka-ui'
  </script>
  <template>
    <RkPaginationEllipsis aria-hidden="true"><slot /></RkPaginationEllipsis>
  </template>

• app/components/ui/pagination/PaginationFirst.vue 0.3 kB

  <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>

• app/components/ui/pagination/PaginationLast.vue 0.3 kB

  <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>

• app/components/ui/pagination/PaginationList.vue 0.5 kB

  <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>

• app/components/ui/pagination/PaginationListItem.vue 0.6 kB

  <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>

• app/components/ui/pagination/PaginationNext.vue 0.3 kB

  <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>

• app/components/ui/pagination/PaginationPrev.vue 0.3 kB

  <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>

• app/components/ui/pagination/index.ts 0.5 kB

  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