diff --git a/package-lock.json b/package-lock.json
index 7ba02a5..6553352 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ui-thing",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ui-thing",
-      "version": "0.1.45",
+      "version": "0.1.46",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.7.9",
diff --git a/src/comps.ts b/src/comps.ts
index 6159531..b87c180 100644
--- a/src/comps.ts
+++ b/src/comps.ts
@@ -315,7 +315,7 @@ export default [
         fileName: "Breadcrumbs.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <div class="flex items-center gap-3">\n        <div class="flex cursor-pointer items-center gap-2">\n          <slot name="crumbIcon" :item="item" :index="i">\n            <Icon\n              v-if="item.icon"\n              :name="item.icon"\n              :class="[!isNotLastItem(i) && \'text-primary\']"\n            />\n          </slot>\n          <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n            <NuxtLink\n              v-if="item.label"\n              :to="!item?.disabled ? item.link : \'\'"\n              :class="[\n                isNotLastItem(i)\n                  ? \'text-muted-foreground hover:underline\'\n                  : \'font-semibold text-primary\',\n              ]"\n              class="text-sm text-foreground"\n              @click="item?.click?.()"\n              >{{ item.label }}</NuxtLink\n            >\n          </slot>\n        </div>\n        <slot name="separator" :item="item" :index="i">\n          <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
+          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <slot :name="item.slot || \'default\'">\n        <div class="flex items-center gap-3">\n          <div class="group flex items-center gap-2">\n            <slot name="crumbIcon" :item="item" :index="i">\n              <Icon\n                v-if="item.icon"\n                :name="item.icon"\n                :class="[\n                  isNotLastItem(i)\n                    ? \'text-muted-foreground group-hover:text-foreground\'\n                    : \'text-primary\',\n                ]"\n              />\n            </slot>\n            <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n              <NuxtLink\n                v-if="item.label"\n                :to="!item?.disabled ? item.link : \'\'"\n                :class="[\n                  item.link && !item.disabled && \'underline-offset-2 group-hover:underline\',\n                  isNotLastItem(i)\n                    ? \'text-muted-foreground group-hover:text-foreground\'\n                    : \'font-semibold text-primary\',\n                ]"\n                class="text-sm text-foreground transition-colors"\n                @click="item?.click?.()"\n                >{{ item.label }}</NuxtLink\n              >\n            </slot>\n          </div>\n        </div>\n      </slot>\n      <slot name="separator" :item="item" :index="i">\n        <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label?: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    slot?: string;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -1710,13 +1710,13 @@ export default [
         fileName: "Pagination/Ellipsis.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationEllipsis v-bind="forwarded">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationEllipsis v-bind="forwarded">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/First.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationFirst v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationFirst v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/Item.vue",
@@ -1728,31 +1728,31 @@ export default [
         fileName: "Pagination/Last.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationLast v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationLast v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/List.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
+          '<template>\n  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
       },
       {
         fileName: "Pagination/Next.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationNext v-bind="props">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationNext } from "radix-vue";\n  import type { PaginationNextProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationNextProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationNext v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationNext } from "radix-vue";\n  import type { PaginationNextProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationNextProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/Pagination.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationRoot v-bind="forwarded">\n    <slot>\n      <UiPaginationList v-slot="{ items }">\n        <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n        <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n        <template v-for="(page, index) in items" :key="index">\n          <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n          <UiPaginationEllipsis\n            v-else-if="page.type === \'ellipsis\'"\n            as-child\n            v-bind="page"\n            :icon="ellipsisIcon"\n          />\n        </template>\n        <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n        <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n      </UiPaginationList>\n    </slot>\n  </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n  import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PaginationRootProps & {\n        ellipsisIcon?: string;\n        firstIcon?: string;\n        lastIcon?: string;\n        nextIcon?: string;\n        prevIcon?: string;\n      }\n    >(),\n    {\n      defaultPage: 1,\n      total: 10,\n      itemsPerPage: 10,\n      siblingCount: 3,\n      showEdges: true,\n      ellipsisIcon: "lucide:more-horizontal",\n      firstIcon: "lucide:chevrons-left",\n      lastIcon: "lucide:chevrons-right",\n      nextIcon: "lucide:chevron-right",\n      prevIcon: "lucide:chevron-left",\n    }\n  );\n\n  const emits = defineEmits<PaginationRootEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n    emits\n  );\n</script>\n',
+          '<template>\n  <PaginationRoot v-bind="forwarded">\n    <slot>\n      <UiPaginationList v-slot="{ items }">\n        <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n        <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n        <template v-for="(page, index) in items" :key="index">\n          <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n          <UiPaginationEllipsis\n            v-else-if="page.type === \'ellipsis\'"\n            as-child\n            v-bind="page"\n            :icon="ellipsisIcon"\n          />\n        </template>\n        <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n        <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n      </UiPaginationList>\n    </slot>\n  </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n  import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PaginationRootProps & {\n        ellipsisIcon?: string;\n        firstIcon?: string;\n        lastIcon?: string;\n        nextIcon?: string;\n        prevIcon?: string;\n      }\n    >(),\n    {\n      defaultPage: 1,\n      total: 10,\n      itemsPerPage: 10,\n      siblingCount: 3,\n      showEdges: true,\n      ellipsisIcon: "lucide:more-horizontal",\n      firstIcon: "lucide:chevrons-left",\n      lastIcon: "lucide:chevrons-right",\n      nextIcon: "lucide:chevron-right",\n      prevIcon: "lucide:chevron-left",\n    }\n  );\n\n  const emits = defineEmits<PaginationRootEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n    emits\n  );\n</script>\n',
       },
       {
         fileName: "Pagination/Prev.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationPrev v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationPrev v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
     ],
     utils: [],