{
  "name": "tags-input-editable-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/tags-input"
  ],
  "registryDependencies": [
    "button",
    "tags-input"
  ],
  "files": [
    {
      "path": "examples/tags-input-editable-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { RefreshCcw } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  TagsInput,\n  TagsInputClear,\n  TagsInputInput,\n  TagsInputItem,\n  TagsInputLabel,\n  TagsInputList,\n} from \"@/registry/bases/radix/ui/tags-input\";\n\nexport default function TagsInputEditableDemo() {\n  const [tricks, setTricks] = React.useState([\n    \"Kickflip\",\n    \"Heelflip\",\n    \"FS 540\",\n  ]);\n\n  return (\n    <TagsInput value={tricks} onValueChange={setTricks} editable addOnPaste>\n      <TagsInputLabel>Tricks</TagsInputLabel>\n      <TagsInputList>\n        {tricks.map((trick) => (\n          <TagsInputItem key={trick} value={trick}>\n            {trick}\n          </TagsInputItem>\n        ))}\n        <TagsInputInput placeholder=\"Add trick...\" />\n      </TagsInputList>\n      <TagsInputClear asChild>\n        <Button variant=\"outline\">\n          <RefreshCcw className=\"h-4 w-4\" />\n          Clear\n        </Button>\n      </TagsInputClear>\n    </TagsInput>\n  );\n}\n",
      "target": ""
    }
  ]
}