║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Text Highlighter date: 2025-02-11 description: A text highlighter that mimics the effect of a human-drawn marker stroke. author: pratiyank published: true

<ComponentPreview name="highlighter-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/highlighter

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="highlighter" /> </Steps> </TabsContent> </Tabs>

Usage

import { Highlighter } from "@/components/ui/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!

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║