glasscn
Highlight Phrase

Hover to preview text, videos, and rich content. Click or tap to keep it open; press Escape to dismiss.

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

import {
  HighlightPhraseTrigger,
  HighlightPhraseContent,
} from "@/components/ui/glasscn/highlight-phrase"

Installation

$ npx shadcn add @glasscn/highlight-phrase

Variants

clear

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

frosted

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

subtle

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

liquid

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

liquid-refract

Keep your reader in the flow with right where they need it. Hover over the underlined words to take a closer look.

API

Prop
Type
Default
Description
HighlightPhraseContentglassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""frosted"
Controls the glass surface treatment.
HighlightPhraseTriggerhighlight
booleantrue
Applies the default semibold red wavy underline. Disable it for buttons or fully custom triggers.
HighlightPhraseTriggerdelay / closeDelay
number180 / 180
Hover opening and closing delays in milliseconds. The pointer can move into the card.
HighlightPhraseContentchildren
React.ReactNode-
Text, video, links, or any composed React content.
HighlightPhraseTrigger...props
React.ComponentProps<typeof PopoverTrigger>-
Props from the underlying shadcn/ui primitive.
HighlightPhraseContent...props
React.ComponentProps<typeof GlassPopoverContent>-
Props from the underlying shadcn/ui primitive.