Highlighted Text

A customizable text highlight component for drawing attention to key content.

Dynamic highlightingCustomizable stylesSmooth animation
Basic

Beautifully Highlighted Text

Features

Animated Highlight

Smoothly draws attention to text segments.

Custom Colors

Easily style the highlight color and shape.

Responsive

Adapts to text size and layout changes.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add highlighted-text

Anatomy
import { HighlightedText } from "@/components/ui/motion/highlighted-text";<HighlightedText>Important Text</HighlightedText>
Testing Playground

This component adds a subtle animated highlight to any inline text you place inside it.

Props

Loading types…

Edit on GitHub

Last updated on

Cipher Text

A text animation that simulates a decoding or decryption effect.

Morphing Text

Creates smooth transitions between words by morphing their shared letters.