{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "tags-input",
  "title": "Tags Input",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/tags-input/TagsInput.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputRoot, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TagsInputRoot\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'border-input bg-background flex flex-wrap items-center gap-2 rounded-md border px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',\n        'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        props.class,\n      )\n    \"\n  >\n    <slot v-bind=\"slotProps\" />\n  </TagsInputRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/tags-input/TagsInput.vue"
    },
    {
      "path": "packages/registry-vue/components/tags-input/TagsInputInput.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TagsInputInputProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputInput, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputInput\n    v-bind=\"forwardedProps\"\n    :class=\"cn('min-h-5 flex-1 bg-transparent px-1 text-sm focus:outline-none', props.class)\"\n  />\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/tags-input/TagsInputInput.vue"
    },
    {
      "path": "packages/registry-vue/components/tags-input/TagsInputItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TagsInputItemProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputItem, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'bg-secondary data-[state=active]:ring-ring ring-offset-background flex h-5 items-center rounded-md data-[state=active]:ring-2 data-[state=active]:ring-offset-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TagsInputItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/tags-input/TagsInputItem.vue"
    },
    {
      "path": "packages/registry-vue/components/tags-input/TagsInputItemDelete.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TagsInputItemDeleteProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { X } from 'lucide-vue-next'\nimport { TagsInputItemDelete, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('mr-1 flex rounded bg-transparent', props.class)\">\n    <slot>\n      <X class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </slot>\n  </TagsInputItemDelete>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/tags-input/TagsInputItemDelete.vue"
    },
    {
      "path": "packages/registry-vue/components/tags-input/TagsInputItemText.vue",
      "content": "<script setup lang=\"ts\">\nimport type { TagsInputItemTextProps } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { TagsInputItemText, useForwardProps } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('rounded bg-transparent px-2 py-0.5 text-sm', props.class)\">\n    <slot />\n  </TagsInputItemText>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/tags-input/TagsInputItemText.vue"
    },
    {
      "path": "packages/registry-vue/components/tags-input/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": "registry:ui",
      "target": "~/app/components/ui/tags-input/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "lucide-vue-next",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Multi-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.",
  "categories": [
    "form"
  ]
}