{
  "name": "mention-custom-trigger-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/mention"
  ],
  "files": [
    {
      "path": "examples/mention-custom-trigger-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport {\n  Mention,\n  MentionContent,\n  MentionInput,\n  MentionItem,\n} from \"@/registry/bases/radix/ui/mention\";\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\";\n\nconst users = [\n  {\n    id: \"1\",\n    name: \"Olivia Martin\",\n    email: \"olivia@email.com\",\n  },\n  {\n    id: \"2\",\n    name: \"Isabella Nguyen\",\n    email: \"isabella@email.com\",\n  },\n  {\n    id: \"3\",\n    name: \"Emma Wilson\",\n    email: \"emma@email.com\",\n  },\n  {\n    id: \"4\",\n    name: \"Jackson Lee\",\n    email: \"jackson@email.com\",\n  },\n  {\n    id: \"5\",\n    name: \"William Kim\",\n    email: \"will@email.com\",\n  },\n];\n\nexport default function MentionCustomTriggerDemo() {\n  return (\n    <Mention trigger=\"#\" className=\"w-full max-w-[400px]\">\n      <MentionInput placeholder=\"Type # to mention a user...\" asChild>\n        <Textarea />\n      </MentionInput>\n      <MentionContent>\n        {users.map((user) => (\n          <MentionItem\n            key={user.id}\n            value={user.name}\n            className=\"flex-col items-start gap-0.5\"\n          >\n            <span className=\"text-sm\">{user.name}</span>\n            <span className=\"text-xs text-muted-foreground\">{user.email}</span>\n          </MentionItem>\n        ))}\n      </MentionContent>\n    </Mention>\n  );\n}\n",
      "target": ""
    }
  ]
}