diff --git a/documentation/src/views/code/PaginationCode.vue b/documentation/src/views/code/PaginationCode.vue
index 25b8b8c..91739df 100644
--- a/documentation/src/views/code/PaginationCode.vue
+++ b/documentation/src/views/code/PaginationCode.vue
@@ -1,155 +1,32 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import {
-  Button,
   Pagination,
+  PaginationContent,
   PaginationEllipsis,
-  PaginationFirst,
-  PaginationLast,
-  PaginationList,
+  PaginationItem,
   PaginationNext,
-  PaginationPrev,
-  PaginationDetails,
-} from '@sethsharp/lumuix'
-import { Link } from '@inertiajs/vue3'
-
-const paginatedData = {
-  data: [],
-  current_page: 4,
-  first_page_url: '?page=1',
-  from: 1,
-  last_page: 6,
-  last_page_url: '?page=7',
-  links: [
-    {
-      active: false,
-      label: '1',
-      url: '?page=1',
-    },
-    {
-      active: false,
-      label: '2',
-      url: '?page=2',
-    },
-    {
-      active: false,
-      label: '3',
-      url: '?page=3',
-    },
-    {
-      active: true,
-      label: '4',
-      url: '?page=4',
-    },
-    {
-      active: false,
-      label: '5',
-      url: '?page=5',
-    },
-    {
-      active: false,
-      label: '6',
-      url: '?page=6',
-    },
-    {
-      active: false,
-      label: '7',
-      url: '?page=7',
-    },
-  ],
-  next_page_url: '?page=6',
-  path: '#',
-  per_page: 2,
-  prev_page_url: '?page=5',
-  to: 2,
-  total: 10,
-}
-
-const getStartingNumber = () => {
-  if (paginatedData.current_page === 1) {
-    if (paginatedData.data.length === 0) {
-      return 0
-    }
-
-    return 1
-  }
-
-  if (paginatedData.current_page === paginatedData.last_page) {
-    return paginatedData.total - paginatedData.data.length
-  }
-
-  return paginatedData.current_page * paginatedData.per_page - paginatedData.per_page
-}
-
-const getTotalNumber = () => {
-  if (paginatedData.current_page === 1) {
-    return paginatedData.data.length
-  }
-
-  if (paginatedData.current_page === paginatedData.last_page) {
-    return paginatedData.total
-  }
-
-  return paginatedData.current_page * paginatedData.per_page
-}
-
-const currentActiveIndex = computed(() => paginatedData.links.findIndex((link) => link.active))
+  PaginationPrevious,
+} from "@sethsharp/lumuix"
 </script>
 
 <template>
-  <div class="justify-between sm:flex">
-    <PaginationDetails
-      :min="getStartingNumber()"
-      :max="getTotalNumber()"
-      :total="paginatedData.total" />
-
-    <Pagination>
-      <PaginationList class="flex items-center gap-1">
-        <PaginationFirst v-slot="{ icon }">
-          <Link :href="paginatedData.first_page_url">
-            <component :is="icon"/>
-          </Link>
-        </PaginationFirst>
-
-        <PaginationPrev
-          v-slot="{ icon }"
-          v-if="paginatedData.prev_page_url">
-          <Link :href="paginatedData.prev_page_url">
-            <component :is="icon" />
-          </Link>
-        </PaginationPrev>
-
-        <template v-for="(item, index) in paginatedData.links">
-          <Button
-            v-if="index <= currentActiveIndex + 2 && index >= currentActiveIndex - 2"
-            :key="index"
-            as-child
-            class="size-10 p-0"
-            :variant="item.active ? 'primary' : 'outline'">
-            <Link :href="item.url">
-              {{ item.label }}
-            </Link>
-          </Button>
-        </template>
-
-        <PaginationEllipsis v-if="currentActiveIndex < paginatedData.links.length - 2" />
-
-        <PaginationNext
-          v-if="paginatedData.next_page_url"
-          v-slot="{ icon }">
-          <Link :href="paginatedData.next_page_url">
-            <component :is="icon" />
-          </Link>
-        </PaginationNext>
-
-        <PaginationLast v-slot="{ icon }">
-          <Link :href="paginatedData.last_page_url">
-            <component
-              :is="icon"
-              class="size-4" />
-          </Link>
-        </PaginationLast>
-      </PaginationList>
-    </Pagination>
-  </div>
+  <Pagination v-slot="{ page }" :items-per-page="10" :total="30" :default-page="2">
+    <PaginationContent v-slot="{ items }">
+      <PaginationPrevious />
+
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+        >
+          {{ item.value }}
+        </PaginationItem>
+      </template>
+
+      <PaginationEllipsis :index="4" />
+
+      <PaginationNext />
+    </PaginationContent>
+  </Pagination>
 </template>
diff --git a/documentation/src/views/components/Pagination.vue b/documentation/src/views/components/Pagination.vue
index af18a0c..17d1689 100644
--- a/documentation/src/views/components/Pagination.vue
+++ b/documentation/src/views/components/Pagination.vue
@@ -5,6 +5,9 @@ import RenderPreviewCode from '../../components/RenderPreviewCode.vue'
 </script>
 
 <template>
+  <div>
+    The latest shadcn pagination api accepts multiple parameters to easily any set of paginated data.
+  </div>
   <RenderPreviewCode :source-code="sourceCode">
     <PaginationCode />
   </RenderPreviewCode>
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 660c327..2ef4e90 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -12,11 +12,11 @@
         "@tanstack/vue-table": "^8.21.3",
         "@unovis/ts": "^1.5.2",
         "@unovis/vue": "^1.5.2",
-        "@vueuse/core": "^13.5.0",
+        "@vueuse/core": "^13.9.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.447.0",
-        "reka-ui": "^2.3.2",
+        "reka-ui": "^2.6.0",
         "tailwind-merge": "^2.5.2",
         "tailwindcss": "^4.1.7",
         "tw-animate-css": "^1.3.4",
diff --git a/ui/package.json b/ui/package.json
index 16787e1..6b05695 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -36,11 +36,11 @@
     "@tanstack/vue-table": "^8.21.3",
     "@unovis/ts": "^1.5.2",
     "@unovis/vue": "^1.5.2",
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.447.0",
-    "reka-ui": "^2.3.2",
+    "reka-ui": "^2.6.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^4.1.7",
     "tw-animate-css": "^1.3.4",
diff --git a/ui/src/components/pagination/Pagination.vue b/ui/src/components/pagination/Pagination.vue
new file mode 100644
index 0000000..d410b24
--- /dev/null
+++ b/ui/src/components/pagination/Pagination.vue
@@ -0,0 +1,26 @@
+<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"]
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
+</template>
diff --git a/ui/src/components/pagination/PaginationContent.vue b/ui/src/components/pagination/PaginationContent.vue
new file mode 100644
index 0000000..5150b49
--- /dev/null
+++ b/ui/src/components/pagination/PaginationContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PaginationListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>
diff --git a/ui/src/components/pagination/PaginationDetails.vue b/ui/src/components/pagination/PaginationDetails.vue
deleted file mode 100644
index aff81c3..0000000
--- a/ui/src/components/pagination/PaginationDetails.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  min: number
-  max: number
-  total: number
-}>()
-</script>
-
-<template>
-  <div class="my-auto text-slate-400 dark:text-slate-100">
-    Showing {{ min }} to {{ max }} of {{ total }} results
-  </div>
-</template>
diff --git a/ui/src/components/pagination/PaginationEllipsis.vue b/ui/src/components/pagination/PaginationEllipsis.vue
index 2f5adb8..cc9e002 100644
--- a/ui/src/components/pagination/PaginationEllipsis.vue
+++ b/ui/src/components/pagination/PaginationEllipsis.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MoreHorizontal } from "lucide-vue-next"
+import { PaginationEllipsis } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
   <PaginationEllipsis
+    data-slot="pagination-ellipsis"
     v-bind="delegatedProps"
-    :class="cn('text-text flex size-9 items-center justify-center', props.class)">
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
     <slot>
-      <MoreHorizontal />
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
     </slot>
   </PaginationEllipsis>
 </template>
diff --git a/ui/src/components/pagination/PaginationFirst.vue b/ui/src/components/pagination/PaginationFirst.vue
index f8ac9f5..cbadd26 100644
--- a/ui/src/components/pagination/PaginationFirst.vue
+++ b/ui/src/components/pagination/PaginationFirst.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import { ChevronsLeft } from 'lucide-vue-next'
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/button'
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/button'
 
-const props = withDefaults(
-  defineProps<
-    PaginationFirstProps & {
-      class?: HTMLAttributes['class']
-    }
-  >(),
-  {},
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
 })
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <PaginationFirst v-bind="delegatedProps">
-    <Button
-      :class="cn('size-10 p-0', props.class)"
-      as-child
-      variant="outline">
-      <slot :icon="ChevronsLeft" />
-    </Button>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
   </PaginationFirst>
 </template>
diff --git a/ui/src/components/pagination/PaginationItem.vue b/ui/src/components/pagination/PaginationItem.vue
new file mode 100644
index 0000000..fa3c198
--- /dev/null
+++ b/ui/src/components/pagination/PaginationItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/button'
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      props.class)"
+  >
+    <slot />
+  </PaginationListItem>
+</template>
diff --git a/ui/src/components/pagination/PaginationLast.vue b/ui/src/components/pagination/PaginationLast.vue
index 06bf2d3..d40fac4 100644
--- a/ui/src/components/pagination/PaginationLast.vue
+++ b/ui/src/components/pagination/PaginationLast.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import { ChevronsRight } from 'lucide-vue-next'
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/button'
+import type { PaginationLastProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationLast, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/button'
 
-const props = withDefaults(
-  defineProps<
-    PaginationLastProps & {
-      class?: HTMLAttributes['class']
-    }
-  >(),
-  {},
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
 })
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <PaginationLast v-bind="delegatedProps">
-    <Button
-      :class="cn('size-10 p-0', props.class)"
-      as-child
-      variant="outline">
-      <slot :icon="ChevronsRight" />
-    </Button>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Last</span>
+      <ChevronRightIcon />
+    </slot>
   </PaginationLast>
 </template>
diff --git a/ui/src/components/pagination/PaginationNext.vue b/ui/src/components/pagination/PaginationNext.vue
index 88078a1..46fd06d 100644
--- a/ui/src/components/pagination/PaginationNext.vue
+++ b/ui/src/components/pagination/PaginationNext.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import { ChevronRight } from 'lucide-vue-next'
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/button'
+import type { PaginationNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/button'
 
-const props = withDefaults(
-  defineProps<
-    PaginationNextProps & {
-      class?: HTMLAttributes['class']
-    }
-  >(),
-  {},
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
 })
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <PaginationNext v-bind="delegatedProps">
-    <Button
-      :class="cn('size-10 p-0', props.class)"
-      as-child
-      variant="outline">
-      <slot :icon="ChevronRight" />
-    </Button>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </slot>
   </PaginationNext>
 </template>
diff --git a/ui/src/components/pagination/PaginationPrev.vue b/ui/src/components/pagination/PaginationPrev.vue
deleted file mode 100644
index bf5acc5..0000000
--- a/ui/src/components/pagination/PaginationPrev.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { ChevronLeft } from 'lucide-vue-next'
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/button'
-
-const props = withDefaults(
-  defineProps<
-    PaginationPrevProps & {
-      class?: HTMLAttributes['class']
-    }
-  >(),
-  {},
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <PaginationPrev v-bind="delegatedProps">
-    <Button
-      :class="cn('size-10 p-0', props.class)"
-      as-child
-      variant="outline">
-      <slot :icon="ChevronLeft" />
-    </Button>
-  </PaginationPrev>
-</template>
diff --git a/ui/src/components/pagination/PaginationPrevious.vue b/ui/src/components/pagination/PaginationPrevious.vue
new file mode 100644
index 0000000..8d7c5f9
--- /dev/null
+++ b/ui/src/components/pagination/PaginationPrevious.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>
diff --git a/ui/src/components/pagination/index.ts b/ui/src/components/pagination/index.ts
index 9edc124..51ae7fd 100644
--- a/ui/src/components/pagination/index.ts
+++ b/ui/src/components/pagination/index.ts
@@ -1,7 +1,8 @@
-export { PaginationRoot as Pagination, PaginationList, PaginationListItem } from 'radix-vue'
-export { default as PaginationDetails } from './PaginationDetails.vue'
-export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
-export { default as PaginationFirst } from './PaginationFirst.vue'
-export { default as PaginationLast } from './PaginationLast.vue'
-export { default as PaginationNext } from './PaginationNext.vue'
-export { default as PaginationPrev } from './PaginationPrev.vue'
+export { default as Pagination } from "./Pagination.vue"
+export { default as PaginationContent } from "./PaginationContent.vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationItem } from "./PaginationItem.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as PaginationPrevious } from "./PaginationPrevious.vue"