Mentions & Tags

Message input that highlights @-mentions in sky and #channel tags in violet amid plain body text.

Can we ping @mira about the #launch-prep agenda?

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Input27 } from "@/components/beste/piece/input27";

<Input27
  label="Thread"
  tokens={[
    {
      "text": "Can we ping "
    },
    {
      "text": "mira",
      "type": "at"
    },
    {
      "text": " about the "
    },
    {
      "text": "launch-prep",
      "type": "hash"
    },
    {
      "text": " agenda?"
    }
  ]}
/>