Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
The Magic UI Highlighter makes important text stand out effortlessly.
import { Highlighter } from "@/registry/magicui/highlighter";
export function HighlighterDemo() {
return (
<div className="text-center">
<p className="leading-relaxed">
The{" "}
<Highlighter action="underline" color="#FF9800">
Magic UI Highlighter
</Highlighter>{" "}
makes important{" "}
<Highlighter action="highlight" color="#87CEFA">
text stand out
</Highlighter>{" "}
effortlessly.
</p>
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/highlighter
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!
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development