bigbullui logobigbullui
Componentmedia0.54 KB gzipZero dependencies

Mention Highlight

Highlight @mentions and #hashtags inside running text.

Preview

Live Preview

@ada issued a new #ticket

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add mention-highlight

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz
import { MentionHighlight } from "@/components/ui/mention-highlight";

<MentionHighlight />

Usage guidance

Use Mention Highlight when a ticket stub surface needs Highlight @mentions and #hashtags inside running text. Keep props minimal and prefer composition with sibling stubs.

Avoid Mention Highlight for long form flows or dense data grids where a dedicated layout block fits better.

Source code

mention-highlight.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface MentionHighlightProps extends React.HTMLAttributes<HTMLParagraphElement> {
  text: string;
}

/** Text highlighter for @mentions and #tags. */
export function MentionHighlight({ text, className, ...props }: MentionHighlightProps) {
  const parts = React.useMemo(
    () => text.split(/(@[A-Za-z0-9_]+|#[A-Za-z0-9_]+)/g),
    [text]
  );

  return (
    <p className={cn("text-sm leading-relaxed", className)} {...props}>
      {parts.map((part, idx) => {
        if (part.startsWith("@")) {
          return (
            <span key={idx} className="rounded-sm bg-accent/10 px-0.5 font-medium text-accent animate-[fade-in_0.2s_ease-out_both] motion-reduce:animate-none">
              {part}
            </span>
          );
        }
        if (part.startsWith("#")) {
          return (
            <span key={idx} className="rounded-sm bg-secondary px-0.5 font-medium text-foreground/80">
              {part}
            </span>
          );
        }
        return <React.Fragment key={idx}>{part}</React.Fragment>;
      })}
    </p>
  );
}

Props

PropTypeDescription
textstring