glasscn
Highlight Text

Inline text highlight with preset color variants and custom background class support.

Highlight text

import { HighlightText } from "@/components/ui/highlight-text"

export function HighlightTextDemo() {
  return <HighlightText variant="lime">Highlight text</HighlightText>

Installation

$ npx shadcn add @glasscn/highlight-text

Variants

lime

Highlight text

yellow

Highlight text

pink

Highlight text

cyan

Highlight text

orange

Highlight text

API

Prop
Type
Default
Description
HighlightTextvariant
"lime" | "yellow" | "pink" | "cyan" | "orange""lime"
Controls the preset highlight color.
HighlightTextclassName
string-
Applies custom classes to the highlight background layer, such as a custom bg-* utility.
HighlightText...props
children: React.ReactNode-
Props from the underlying shadcn/ui primitive.