diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index c8ca92f4..2dd3cbe4 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -618,6 +618,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/TabsDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/TabsDemo.vue'],
     },
+    TagsInputComboDemo: {
+      name: 'TagsInputComboDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'popover', 'tags-input'],
+      component: () => import('../src/lib/registry/default/example/TagsInputComboDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TagsInputComboDemo.vue'],
+    },
+    TagsInputDemo: {
+      name: 'TagsInputDemo',
+      type: 'components:example',
+      registryDependencies: ['tags-input'],
+      component: () => import('../src/lib/registry/default/example/TagsInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TagsInputDemo.vue'],
+    },
     TextareaDemo: {
       name: 'TextareaDemo',
       type: 'components:example',
@@ -1523,6 +1537,20 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/TabsDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/TabsDemo.vue'],
     },
+    TagsInputComboDemo: {
+      name: 'TagsInputComboDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'popover', 'tags-input'],
+      component: () => import('../src/lib/registry/new-york/example/TagsInputComboDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TagsInputComboDemo.vue'],
+    },
+    TagsInputDemo: {
+      name: 'TagsInputDemo',
+      type: 'components:example',
+      registryDependencies: ['tags-input'],
+      component: () => import('../src/lib/registry/new-york/example/TagsInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TagsInputDemo.vue'],
+    },
     TextareaDemo: {
       name: 'TextareaDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
new file mode 100644
index 00000000..6854b92a
--- /dev/null
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -0,0 +1,21 @@
+---
+title: Tags Input
+description: Tag inputs render tags inside an input, followed by an actual text input.
+source: apps/www/src/lib/registry/default/ui/tags-input
+primitive: https://www.radix-vue.com/components/tags-input.html
+---
+
+<ComponentPreview name="TagsInputDemo" /> 
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add tags-input
+```
+
+
+## Usage
+
+### Multiple Combobox
+
+<ComponentPreview name="TagsInputComboDemo" /> 
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index 8261aefc..4ee0ff54 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -84,7 +84,8 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               v-for="option in options"
               :key="option.value"
               :value="option"
-              @select="() => {
+              @select="(e) => {
+                console.log(e.detail.value)
                 const isSelected = selectedValues.has(option.value)
                 if (isSelected) {
                   selectedValues.delete(option.value)
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboDemo.vue
new file mode 100644
index 00000000..632a1dc0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboDemo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/default/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const open = ref(false)
+const value = ref([])
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        class="w-[200px] justify-between"
+      >
+        qwe
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[200px] p-0">
+      <Command>
+        <CommandInput class="h-9" placeholder="Search framework..." />
+        <CommandEmpty>No framework found.</CommandEmpty>
+        <CommandList>
+          <CommandGroup>
+            <CommandItem
+              v-for="framework in frameworks"
+              :key="framework.value"
+              :value="framework"
+              @select="(ev) => {
+                console.log(ev.detail.value)
+                // if (typeof ev.detail.value === 'string') {
+                //   value = ev.detail.value
+                // }
+                open = true
+              }"
+            >
+              {{ framework.label }}
+              <!-- <Check
+              /> -->
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TagsInputDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
new file mode 100644
index 00000000..260005b6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+
+const modelValue = ref(['Apple', 'Banana'])
+</script>
+
+<template>
+  <TagsInput v-model="modelValue">
+    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <TagsInputItemText />
+      <TagsInputItemDelete />
+    </TagsInputItem>
+
+    <TagsInputInput placeholder="Fruits..." />
+  </TagsInput>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..acf6bd3c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..c55b2b65
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..e2aa1336
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex items-center rounded-md bg-secondary', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..544eebc4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..91ade8b6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/index.ts b/apps/www/src/lib/registry/default/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboDemo.vue
new file mode 100644
index 00000000..b2a8bdfe
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboDemo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/default/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { TagsInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const open = ref(false)
+const value = ref([])
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        role="combobox"
+        :aria-expanded="open"
+        class="w-[200px] justify-between"
+      >
+        qwe
+        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[200px] p-0">
+      <Command>
+        <CommandInput class="h-9" placeholder="Search framework..." />
+        <CommandEmpty>No framework found.</CommandEmpty>
+        <CommandList>
+          <CommandGroup>
+            <CommandItem
+              v-for="framework in frameworks"
+              :key="framework.value"
+              :value="frameworks"
+              @select="(ev) => {
+                // if (typeof ev.detail.value === 'string') {
+                //   value = ev.detail.value
+                // }
+                open = false
+              }"
+            >
+              {{ framework.label }}
+              <!-- <Check
+              /> -->
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
new file mode 100644
index 00000000..b744bc9a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+
+const modelValue = ref(['Apple', 'Banana'])
+</script>
+
+<template>
+  <TagsInput v-model="modelValue">
+    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <TagsInputItemText />
+      <TagsInputItemDelete />
+    </TagsInputItem>
+
+    <TagsInputInput placeholder="Fruits..." />
+  </TagsInput>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..5989dc20
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..c55b2b65
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..e2aa1336
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex items-center rounded-md bg-secondary', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..c72ee631
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Cross2Icon class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..8948bd07
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts b/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 9589b3b6..ab400e20 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -580,6 +580,23 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "tags-input",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils",
+      "button"
+    ],
+    "files": [
+      "ui/tags-input/TagsInput.vue",
+      "ui/tags-input/TagsInputInput.vue",
+      "ui/tags-input/TagsInputItem.vue",
+      "ui/tags-input/TagsInputItemDelete.vue",
+      "ui/tags-input/TagsInputItemText.vue",
+      "ui/tags-input/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "textarea",
     "dependencies": [
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
new file mode 100644
index 00000000..f47f973d
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/tags-input.json
@@ -0,0 +1,35 @@
+{
+  "name": "tags-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "TagsInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
+    },
+    {
+      "name": "TagsInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex items-center rounded-md bg-secondary', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
+    },
+    {
+      "name": "TagsInputItemDelete.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <X class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
+    },
+    {
+      "name": "TagsInputItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
new file mode 100644
index 00000000..6ba10e8f
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/tags-input.json
@@ -0,0 +1,35 @@
+{
+  "name": "tags-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils",
+    "button"
+  ],
+  "files": [
+    {
+      "name": "TagsInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputRoot>\n</template>\n"
+    },
+    {
+      "name": "TagsInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex items-center rounded-md bg-secondary', props.class)\">\n    <slot />\n  </TagsInputItem>\n</template>\n"
+    },
+    {
+      "name": "TagsInputItemDelete.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n    <slot>\n      <Cross2Icon class=\"w-4 h-4\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n"
+    },
+    {
+      "name": "TagsInputItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file