Wensity Labs

Text Highlight

Component

About

A React text component that draws a hand-placed highlighter marker band sweeping in behind inline text, tracking wrapped lines and re-fitting on resize.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Highlight to your project and fits it to your theme.

Code

How Text Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TextHighlight } from "@/components/ui/text-highlight";

export default function TextHighlightDemo() {
  return (
    <p className="font-display text-2xl text-zinc-900 dark:text-zinc-100">
      I think wensity has the <TextHighlight>best components</TextHighlight> on
      the internet.
    </p>
  );
}

More by Wensity Labs

View all
  • Sidebar

    Sidebar

    235
  • Calendar

    Calendar

    173
  • Button

    Button

    76
  • Color Picker

    Color Picker

    64
  • Image Comparison Slider

    Image Comparison Slider

    55
  • AI Prompt Input

    AI Prompt Input

    50
  • Text Morphing

    Text Morphing

    37
  • Navigation Menu

    Navigation Menu

    36