Highlighter Text
NewFree
A marker stroke draws behind the words you choose when they scroll into view, with an uneven hand-drawn edge and text that changes color under the pen.
Customize
Stroke
34ms
#ff784f
When to use it
- Key phrases in a landing page pitch or pricing paragraph
- Takeaways inside long articles, guides and docs
- Testimonials where one sentence should stand out
Good to know
- Plan
- Free, MIT license
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 282
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/highlighter-text.jsonWorks in any project set up with the shadcn CLI.
- Copy the code from the Code tab into
components/ui/highlighter-text.tsx.
Free under the MIT license. If it saved you time, star the repo on GitHub: it helps other developers find it.
Usage
import { HighlighterText } from "@/components/ui/highlighter-text";
<p className="text-3xl font-bold">
<HighlighterText
text="Most players decide in the first ten seconds."
highlight={["first ten seconds"]}
/>
</p>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The full text. |
| highlight | string[] | — | Words or short phrases to mark, matched without case or punctuation. |
| color | string | "#ff784f" | Color of the marker. |
| markedTextColor | string | "#070606" | Color of the marked words on top of the stroke. Used by the "full" variant. |
| variant | "full" | "underline" | "full" | Cover the whole word, or draw a stroke along its lower half. |
| pace | number | 34 | Milliseconds the pen spends on each letter. |
| delay | number | 150 | Milliseconds before the first stroke starts. |
| once | boolean | true | Draw only the first time the words enter the viewport. |
| className | string | — | Extra classes for the text. |