diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 306df795..5438904e 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -261,6 +261,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/InputForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/InputForm.vue'],
     },
+    InputFormAutoAnimate: {
+      name: 'InputFormAutoAnimate',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input'],
+      component: () => import('../src/lib/registry/default/example/InputFormAutoAnimate.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputFormAutoAnimate.vue'],
+    },
     InputWithButton: {
       name: 'InputWithButton',
       type: 'components:example',
@@ -303,6 +310,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/NavigationMenuDemoItem.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/NavigationMenuDemoItem.vue'],
     },
+    PaginationDemo: {
+      name: 'PaginationDemo',
+      type: 'components:example',
+      registryDependencies: ['pagination', 'button'],
+      component: () => import('../src/lib/registry/default/example/PaginationDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PaginationDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
@@ -844,6 +858,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/InputForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/InputForm.vue'],
     },
+    InputFormAutoAnimate: {
+      name: 'InputFormAutoAnimate',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input'],
+      component: () => import('../src/lib/registry/new-york/example/InputFormAutoAnimate.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputFormAutoAnimate.vue'],
+    },
     InputWithButton: {
       name: 'InputWithButton',
       type: 'components:example',
@@ -886,6 +907,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue'],
     },
+    PaginationDemo: {
+      name: 'PaginationDemo',
+      type: 'components:example',
+      registryDependencies: ['pagination', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/PaginationDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PaginationDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index b1dd237c..0f1b727d 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -375,6 +375,25 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "pagination",
+    "dependencies": [
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      "ui/pagination/PaginationEllipsis.vue",
+      "ui/pagination/PaginationFirst.vue",
+      "ui/pagination/PaginationLast.vue",
+      "ui/pagination/PaginationNext.vue",
+      "ui/pagination/PaginationPrev.vue",
+      "ui/pagination/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "popover",
     "dependencies": [
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 590b4882..70d6a933 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORMI_TEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide, useAttrs } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst id = useId()\nprovide(FORMI_TEM_INJECTION_KEY, id)\n\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', className ?? '')\" v-bind=\"rest\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide, useAttrs } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', className ?? '')\" v-bind=\"rest\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -36,7 +36,7 @@
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORMI_TEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
new file mode 100644
index 00000000..0c33413d
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -0,0 +1,37 @@
+{
+  "name": "pagination",
+  "dependencies": [
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "PaginationEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n    <slot>\n      <MoreHorizontal />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+    },
+    {
+      "name": "PaginationFirst.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronsLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+    },
+    {
+      "name": "PaginationLast.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationLast v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronsRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+    },
+    {
+      "name": "PaginationNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationNext v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronRight class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+    },
+    {
+      "name": "PaginationPrev.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"forwarded\">\n    <Button class=\"w-10 h-10 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronLeft class=\"h-4 w-4\" />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export {\n  PaginationRoot as Pagination,\n  PaginationList,\n  PaginationListItem,\n} from 'radix-vue'\nexport { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/form.json b/apps/www/src/public/registry/styles/new-york/form.json
index 6c1ee60b..61e69a56 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -20,7 +20,7 @@
     },
     {
       "name": "FormItem.vue",
-      "content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORMI_TEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst id = useId()\nprovide(FORMI_TEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script lang=\"ts\">\nimport { type InjectionKey } from 'vue'\n\nexport const FORM_ITEM_INJECTION_KEY\n  = Symbol() as InjectionKey<string>\n</script>\n\n<script lang=\"ts\" setup>\nimport { provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst id = useId()\nprovide(FORM_ITEM_INJECTION_KEY, id)\n</script>\n\n<template>\n  <div :class=\"cn('space-y-2', $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "FormLabel.vue",
@@ -36,7 +36,7 @@
     },
     {
       "name": "useFormField.ts",
-      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORMI_TEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
+      "content": "import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'\nimport { inject } from 'vue'\nimport { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'\n\nexport function useFormField() {\n  const fieldContext = inject(FieldContextKey)\n  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)\n\n  const fieldState = {\n    valid: useIsFieldValid(),\n    isDirty: useIsFieldDirty(),\n    isTouched: useIsFieldTouched(),\n    error: useFieldError(),\n  }\n\n  if (!fieldContext)\n    throw new Error('useFormField should be used within <FormField>')\n\n  const { name } = fieldContext\n  const id = fieldItemContext\n\n  return {\n    id,\n    name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
new file mode 100644
index 00000000..daa6b68d
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -0,0 +1,37 @@
+{
+  "name": "pagination",
+  "dependencies": [
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "PaginationEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<PaginationEllipsisProps>()\nconst forwarded = useForwardProps(props)\nconst { class: className, ...rest } = useAttrs()\n</script>\n\n<template>\n  <PaginationEllipsis :class=\"cn('w-9 h-9 flex items-center justify-center', className ?? '')\" v-bind=\"{ ...forwarded, ...rest }\">\n    <slot>\n      <DotsHorizontalIcon />\n    </slot>\n  </PaginationEllipsis>\n</template>\n"
+    },
+    {
+      "name": "PaginationFirst.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationFirstProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationFirst v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <DoubleArrowLeftIcon />\n      </slot>\n    </Button>\n  </PaginationFirst>\n</template>\n"
+    },
+    {
+      "name": "PaginationLast.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationLastProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationLast v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <DoubleArrowRightIcon />\n      </slot>\n    </Button>\n  </PaginationLast>\n</template>\n"
+    },
+    {
+      "name": "PaginationNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationNextProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationNext v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronRightIcon />\n      </slot>\n    </Button>\n  </PaginationNext>\n</template>\n"
+    },
+    {
+      "name": "PaginationPrev.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<PaginationPrevProps>(), {\n  asChild: true,\n})\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n  <PaginationPrev v-bind=\"forwarded\">\n    <Button class=\"w-9 h-9 p-0\" variant=\"outline\">\n      <slot>\n        <ChevronLeftIcon />\n      </slot>\n    </Button>\n  </PaginationPrev>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export {\n  PaginationRoot as Pagination,\n  PaginationList,\n  PaginationListItem,\n} from 'radix-vue'\nexport { default as PaginationEllipsis } from './PaginationEllipsis.vue'\nexport { default as PaginationFirst } from './PaginationFirst.vue'\nexport { default as PaginationLast } from './PaginationLast.vue'\nexport { default as PaginationNext } from './PaginationNext.vue'\nexport { default as PaginationPrev } from './PaginationPrev.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file