{
  "name": "tags-input-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/tags-input"
  ],
  "registryDependencies": [
    "tags-input"
  ],
  "files": [
    {
      "path": "examples/tags-input-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as TagsInput from \"@diceui/tags-input\";\nimport { RefreshCcw, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport default function TagsInputDemo() {\n  const [tricks, setTricks] = React.useState<string[]>([]);\n\n  return (\n    <TagsInput.TagsInputRoot\n      value={tricks}\n      onValueChange={setTricks}\n      className=\"flex w-[380px] flex-col gap-2\"\n      editable\n    >\n      <TagsInput.TagsInputLabel className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n        Tricks\n      </TagsInput.TagsInputLabel>\n      <div className=\"flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm focus-within:ring-1 focus-within:ring-zinc-500 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-within:ring-zinc-400\">\n        {tricks.map((trick) => (\n          <TagsInput.TagsInputItem\n            key={trick}\n            value={trick}\n            className=\"inline-flex max-w-[calc(100%-8px)] items-center gap-1.5 rounded border bg-transparent px-2.5 py-1 text-sm focus:outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 data-editable:select-none data-editing:bg-transparent data-editing:ring-1 data-editing:ring-zinc-500 dark:data-editing:ring-zinc-400 [&:not([data-editing])]:pr-1.5 [&[data-highlighted]:not([data-editing])]:bg-zinc-200 [&[data-highlighted]:not([data-editing])]:text-black dark:[&[data-highlighted]:not([data-editing])]:bg-zinc-800 dark:[&[data-highlighted]:not([data-editing])]:text-white\"\n          >\n            <TagsInput.TagsInputItemText className=\"truncate\" />\n            <TagsInput.TagsInputItemDelete className=\"h-4 w-4 shrink-0 rounded-sm opacity-70 ring-offset-zinc-950 transition-opacity hover:opacity-100\">\n              <X className=\"h-3.5 w-3.5\" />\n            </TagsInput.TagsInputItemDelete>\n          </TagsInput.TagsInputItem>\n        ))}\n        <TagsInput.TagsInputInput\n          placeholder=\"Add trick...\"\n          className=\"flex-1 bg-transparent outline-hidden placeholder:text-zinc-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-zinc-400\"\n        />\n      </div>\n      <TagsInput.TagsInputClear className=\"flex h-9 items-center justify-center gap-2 rounded-sm border border-input bg-transparent text-zinc-800 shadow-xs hover:bg-zinc-100/80 dark:text-zinc-300 dark:hover:bg-zinc-900/80\">\n        <RefreshCcw className=\"h-4 w-4\" />\n        Clear\n      </TagsInput.TagsInputClear>\n    </TagsInput.TagsInputRoot>\n  );\n}\n",
      "target": ""
    }
  ]
}