Text Highlight

Use Text Highlight to emphasize a short piece of inline content with a restrained marker, underline, or block reveal.

Preview

Reduce motion:Off

Tune:Off

Inspect

Details should feel obvious.

Installation

npx shadcn@latest add @sona-ui/text-highlight

Usage


export default function TextHighlightDemo() {
  return (
    <p className="max-w-xl text-center text-3xl font-medium leading-tight tracking-tight">
      Good interfaces make the important details{" "}
      <TextHighlight>feel obvious</TextHighlight>.
    </p>
  );
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The text or inline content to emphasize.
`variant`	`TextHighlightVariant`	`"marker"`	The visual treatment used for the highlight.
`trigger`	`TextHighlightTrigger`	`"in-view"`	Controls when the highlight animation starts.
`color`	`string`	`"#facc15"`	The highlight color. Accepts any CSS color value.
`duration`	`number`	`520`	The animation duration in milliseconds.
`delay`	`number`	`0`	The animation delay in milliseconds.
`once`	`boolean`	`true`	Whether an in-view highlight should play only once.

Accessibility

The effect is decorative and does not change the text semantics. Reduced-motion users receive the completed highlight immediately.

Was this page helpful?

Your response helps us improve component docs.