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:
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The content to be highlighted/annotated. |
color | string | "#ffd1dc" | The color of the highlight. |
action | "highlight" | "circle" | "box" | "bracket" | "crossed-off" | "strike-through" | "underline" | "highlight" | The type of annotation effect to apply. |
strokeWidth | number | 1.5px | The width of the annotation stroke. |
animationDuration | number | 500ms | Duration of the animation in milliseconds. |
iterations | number | 2 | Number of times to draw the annotation (adds a sketchy effect when > 1). |
padding | number | 2px | Padding between the element and the annotation. |
multiline | boolean | true | Whether to annotate across multiple lines or treat content as a single line. |
isView | boolean | false | Controls whether the animation starts only when the element enters viewport. |
Credits
- Credit to @pratiyank for this component!