Browse components
Text Highlighter
A marker-pen stroke swipes behind chosen words as they scroll into view, flipping the ink color in sync.
Installation
npx shadcn@latest add @glint-ui/text-highlighterFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/text-highlighter.json
Usage
import { TextHighlighter } from "@/components/ui/text-highlighter";
<p>Ship <TextHighlighter>small, sharp</TextHighlighter> releases.</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The words to highlight. |
| color | string | "#a3e635" | Marker color. |
| textColor | string | "#0a0a0a" | Text color while highlighted (marker variant). |
| variant | "marker" | "underline" | "marker" | Full marker stroke, or a low underline swipe. |
| direction | "ltr" | "rtl" | "ltr" | Direction the pen travels. |
| duration | number | 900 | Stroke duration, in ms. |
| delay | number | 0 | Delay after entering view, in ms. |
| className | string | — | Extra classes for the root element. |