Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Highlighter

Highlighter

A text highlighter that mimics the effect of a human-drawn marker stroke.

The Magic UI Highlighter makes important text stand out effortlessly.

Installation

Usage

import { Highlighter } from "@/components/magicui/highlighter";
<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

Here's the updated props table with units specified for the numerical values:

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredThe content to be highlighted/annotated.
colorstring"#ffd1dc"The color of the highlight.
action"highlight" | "circle" | "box" | "bracket" | "crossed-off" | "strike-through" | "underline""highlight"The type of annotation effect to apply.
strokeWidthnumber1.5pxThe width of the annotation stroke.
animationDurationnumber500msDuration of the animation in milliseconds.
iterationsnumber2Number of times to draw the annotation (adds a sketchy effect when > 1).
paddingnumber2pxPadding between the element and the annotation.
multilinebooleantrueWhether to annotate across multiple lines or treat content as a single line.

Credits