Highlight Text

7 animated highlight styles — marker, underline, box, strikethrough, gradient, glow, and bracket.

Import

import { HighlightText } from "@igorao79/uivix";

This is an

important concept

in UI design.

Highlighted text

Variant

Color

Duration800ms

marker

This uses the

marker highlight

variant

underline

This uses the

underline highlight

variant

box

This uses the

box highlight

variant

strikethrough

This uses the

strikethrough highlight

variant

gradient

This uses the

gradient highlight

variant

glow

This uses the

glow highlight

variant

bracket

This uses the

bracket highlight

variant

Prop	Type	Default	Description
children	string	-	The text content (required)
variant	"marker" \| "underline" \| "box" \| "strikethrough" \| "gradient" \| "glow" \| "bracket"	"marker"	Highlight style
color	string	"rgba(139,92,246,0.35)"	Primary highlight color
colorTo	string	-	Second color for gradient variant
duration	number	800	Animation duration in ms
delay	number	0	Delay before animation in ms
triggerOnView	boolean	true	Trigger when scrolled into view
as	ElementType	"span"	HTML tag to render
className	string	-	Additional CSS classes