Skip to main content
Highlight and annotate text with various styles including highlights, underlines, circles, and more.

Installation

npx shadcn@latest add @magicui/highlighter

Usage

import { Highlighter } from "@/components/ui/highlighter"

export default function Example() {
  return (
    <p>
      The{" "}
      <Highlighter action="underline" color="#FF9800">
        Magic UI Highlighter
      </Highlighter>{" "}
      makes important{" "}
      <Highlighter action="highlight" color="#87CEFA">
        text stand out
      </Highlighter>{" "}
      effortlessly.
    </p>
  )
}

Props

children
React.ReactNode
required
The content to be highlighted or annotated
action
AnnotationAction
default:"'highlight'"
The type of annotation effect. Options: highlight, underline, box, circle, strike-through, crossed-off, bracket
color
string
default:"'#ffd1dc'"
The color of the highlight or annotation
strokeWidth
number
default:"1.5"
Width of the annotation stroke in pixels
animationDuration
number
default:"600"
Duration of the drawing animation in milliseconds
iterations
number
default:"2"
Number of times to draw the annotation (creates a sketchy effect when > 1)
padding
number
default:"2"
Padding between the text and the annotation in pixels
multiline
boolean
default:"true"
Whether to annotate across multiple lines or treat as single line
isView
boolean
default:"false"
If true, animation starts only when element enters viewport

Annotation Types

  • highlight - Background highlight
  • underline - Underline below text
  • box - Box around text
  • circle - Circle around text
  • strike-through - Line through text
  • crossed-off - X through text
  • bracket - Brackets around text

Credits

Created by @pratiyank

Build docs developers (and LLMs) love