Dev Design LibraryText Highlight Components
Dev Design Library indexes 40 text highlight components from 24 open-source UI libraries, with the most coming from LocalMode, Animations (Svelte), Aceternity UI, OpenSourceUI and Chakra UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Text highlight components belong to the Text group.
Markershadcn/ui · ReactDisplays an inline status, system note, bordered row, or labeled separator in a conversation.
HighlightChakra UI · ReactUsed to highlight substrings of a text.
HighlighterMagic UI · ReactA text highlighter that mimics the effect of a human-drawn marker stroke.
HighlightArk UI · ReactUsed to emphasize specific words or phrases within a larger body of text.
Highlighted TextSpell UI · ReactText with sliding background highlight animation using mix-blend-mode.
MarkerPanel UI · React NativeInline note between conversation turns.
Animated Text 08 - Marker HighlightShadcn Space · ReactMarker Highlight animation component using motion
Text Highlight WavePixel Perfect · ReactA highlight colour washes across a headline character by character, lifting each glyph out of a dimmed rest state as…
Annotated TextOpenSourceUI · React
Underline DrawKinetics · HTML/CSSScale-transform underline, draws left to right on hover
Annotated TextComponentry · ReactHand-drawn marks — circles, highlights, underlines, cross-outs — sketched around inline text.
Fancy Text HighlighterAnimations (Svelte) · Svelte
AI Overview HighlightNotra · ReactA mark that sweeps in Google's blue highlight.
HighlightShark UI · ReactHighlight search terms within text.
Text HighlightSona UI · React
Highlight Phraseglasscn · ReactA smooth glass hover popover for text, video, and rich content, with click and keyboard access.
Directional UnderlineUI Lab · ReactThe underline comes in from the side your cursor entered and leaves toward the side it left.
Synced Transcript ViewerLocalMode · ReactA karaoke-style transcript viewer that highlights words in lockstep with audio playback using word-level alignment…
Pointer HighlightVelora UI · ReactDraws an outline around a phrase on scroll, then glides a pointer icon to its corner.
Doodle CalloutSpaceUI · ReactA hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
Aria MarkerReScript shadcn · ReScript
MarkerD2Studio UI · ReactA small inline marker for flagging state, such as unread, new or pinned.
CoverAceternity UI · React
Highlightark-cn · ReactA shadcn-style text highlight utility built with Ark UI primitives.
MarkChakra UI · React
AnnotationsOpenSourceUI · React
Fancy Underline To BackgroundAnimations (Svelte) · Svelte
Highlight Textglasscn · ReactInline text highlight with preset color variants and custom background class support.
Testimonial HighlightUI Lab · ReactSwipes a highlighter across the line that sold the customer, one line at a time.
Document QA BlockLocalMode · ReactExtractive question answering (Xenova/distilbert-base-cased-distilled-squad, grounding corpus context via…
Text HighlighterVelora UI · ReactMarker-pen sweep that draws in when the phrase scrolls into view.
Base MarkerReScript shadcn · ReScript
Metallic ShimmerD2Studio UI · ReactBrushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content…
Hero HighlightAceternity UI · React
Spell Highlighted TextAnimations (Svelte) · Svelte
PII Redactor BlockLocalMode · ReactDetect PII with on-device NER (Xenova/bert-base-NER, BIO prefixes stripped, low-confidence filtered), redact it with…
Pointer HighlightAceternity UI · React
Chunk Boundary VisualizerLocalMode · ReactVisualizes a document split into distinct chunks: alternating accent-background segments each with a monospace C1/C2…
Mask Token InputLocalMode · ReactA fill-mask / cloze textarea that detects a configurable mask token (default [MASK]), shows an inline highlighted…
Redacted Text DisplayLocalMode · ReactAn inline-annotated text renderer interleaving plain text with color-coded redaction tokens (e.g. [PER], [LOC]) styled…