{
  "name": "combobox-tags-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "combobox",
    "tags-input"
  ],
  "files": [
    {
      "path": "examples/combobox-tags-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxTrigger,\n} from \"@/registry/bases/radix/ui/combobox\";\nimport {\n  TagsInput,\n  TagsInputInput,\n  TagsInputItem,\n} from \"@/registry/bases/radix/ui/tags-input\";\n\nconst tricks = [\n  \"Kickflip\",\n  \"Heelflip\",\n  \"Tre Flip\",\n  \"FS 540\",\n  \"Casper flip 360 flip\",\n  \"Kickflip Backflip\",\n  \"360 Varial McTwist\",\n  \"The 900\",\n];\n\nexport default function ComboboxTagsDemo() {\n  const [value, setValue] = React.useState<string[]>([]);\n\n  return (\n    <Combobox value={value} onValueChange={setValue} multiple>\n      <ComboboxAnchor asChild>\n        <TagsInput\n          className=\"relative flex h-full min-h-10 w-[400px] flex-row flex-wrap items-center justify-start gap-1.5 px-2.5 py-2\"\n          value={value}\n          onValueChange={setValue}\n        >\n          {value.map((item) => (\n            <TagsInputItem key={item} value={item}>\n              {item}\n            </TagsInputItem>\n          ))}\n          <ComboboxInput className=\"h-fit flex-1 p-0\" asChild>\n            <TagsInputInput placeholder=\"Tricks...\" />\n          </ComboboxInput>\n          <ComboboxTrigger className=\"absolute top-2.5 right-2\">\n            <ChevronDown className=\"h-4 w-4 text-muted-foreground\" />\n          </ComboboxTrigger>\n        </TagsInput>\n      </ComboboxAnchor>\n      <ComboboxContent sideOffset={5}>\n        <ComboboxEmpty>No tricks found.</ComboboxEmpty>\n        <ComboboxGroup>\n          <ComboboxGroupLabel>Tricks</ComboboxGroupLabel>\n          {tricks.map((trick) => (\n            <ComboboxItem key={trick} value={trick} outset>\n              {trick}\n            </ComboboxItem>\n          ))}\n        </ComboboxGroup>\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n",
      "target": ""
    }
  ]
}