import { Highlighter } from "@/components/godui/highlighter";

export function HighlighterSentence() {
return (
  <p className="max-w-md text-xl leading-relaxed">
    The quick brown <Highlighter action="underline" color="#60a5fa">fox</Highlighter>{" "}
    jumps over the <Highlighter action="highlight">lazy dog</Highlighter>.
  </p>
);
}

import { Highlighter } from "@/components/godui/highlighter";

export function HighlighterTuned() {
return (
  <p className="text-3xl font-sans">
    <Highlighter
      action="box"
      color="#22d3ee"
      strokeWidth={2.5}
      iterations={3}
      padding={6}
      animationDuration={900}
    >
      Bolder, looser, slower
    </Highlighter>
  </p>
);
}

highlight underline box circle strike-through crossed-off bracket

Highlighter

tsx

import { Highlighter } from "@/components/godui/highlighter";export function HighlighterDemo() {return (  <p className="text-2xl leading-relaxed">    <Highlighter action="highlight">highlight</Highlighter>{" "}    <Highlighter action="underline" color="#60a5fa">underline</Highlighter>{" "}    <Highlighter action="box" color="#f59e0b">box</Highlighter>{" "}    <Highlighter action="circle" color="#34d399">circle</Highlighter>{" "}    <Highlighter action="strike-through" color="#f87171">strike-through</Highlighter>{" "}    <Highlighter action="crossed-off" color="#a78bfa">crossed-off</Highlighter>{" "}    <Highlighter action="bracket" color="#fb7185">bracket</Highlighter>  </p>);}

Documentation

Learn Playground

Draw hand-drawn sketch annotations over inline text, powered by Rough Notation.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/highlighter.json"

Highlighter draws its sketch annotations with rough-notation and uses framer-motion for the optional in-view trigger. Both are peer dependencies:

bash

npm install rough-notation framer-motion

Usage

tsx

import { Highlighter } from "@/components/godui/highlighter";

Wrap any inline text. The annotation is drawn over the element on mount.

tsx

<p>
  The quick brown <Highlighter>fox</Highlighter> jumps over the lazy dog.
</p>

Actions

tsx

<Highlighter action="highlight">highlight</Highlighter>
<Highlighter action="underline" color="#60a5fa">underline</Highlighter>
<Highlighter action="box" color="#f59e0b">box</Highlighter>
<Highlighter action="circle" color="#34d399">circle</Highlighter>
<Highlighter action="strike-through" color="#f87171">strike-through</Highlighter>
<Highlighter action="crossed-off" color="#a78bfa">crossed-off</Highlighter>
<Highlighter action="bracket" color="#fb7185">bracket</Highlighter>

The highlight action paints a pale marker behind the text and renders it in dark ink — like a real highlighter pen — so it stays legible in both light and dark mode. The other actions draw around the text and keep the inherited color.

Animate on scroll

Set isView to defer the draw-in animation until the element scrolls into view.

tsx

<Highlighter action="underline" isView>
  Reveals as you scroll
</Highlighter>

Tuning the sketch

tsx

<Highlighter
  action="box"
  color="#22d3ee"
  strokeWidth={2.5}
  iterations={3}
  padding={6}
  animationDuration={900}
>
  Bolder, looser, slower
</Highlighter>

Examples

In a sentence

Drop it around any inline word — the sketch draws over the text in place.

Tuning the sketch

Push strokeWidth, iterations, padding, and animationDuration for a bolder, looser, slower draw.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Inline text to annotate
`action`	`"highlight" \| "underline" \| "box" \| "circle" \| "strike-through" \| "crossed-off" \| "bracket"`	`"highlight"`	Annotation style
`color`	`string`	`"#ffd1dc"`	Annotation color (any CSS color string)
`strokeWidth`	`number`	`1.5`	Stroke width of the annotation
`animationDuration`	`number`	`600`	Draw-in animation duration in milliseconds
`iterations`	`number`	`2`	Number of sketch passes (higher = more hand-drawn)
`padding`	`number`	`2`	Gap between the text and the annotation
`multiline`	`boolean`	`true`	Allow the annotation to wrap across lines
`isView`	`boolean`	`false`	Defer the animation until scrolled into view

Accessibility

The annotation is a decorative SVG overlay; it does not alter the text content, so the underlying text remains fully readable and selectable by screen readers.