Dev Design LibraryReact Text Components
Dev Design Library indexes 408 React text components from 67 open-source UI libraries, with the most coming from React Bits, Pixel Perfect, Magic UI, Amicro Micro Transitions and Shadcn Space. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React.
Showing 120 of 408, a mix from every library. Open a library to see all of its components.
Markershadcn/ui · ReactDisplays an inline status, system note, bordered row, or labeled separator in a conversation.
Alert TitleMUI / Material UI · React
AsciitextReact Bits · ReactRenders text with an animated ASCII background for a retro feel.
BlockquoteChakra UI · ReactUsed to quote text content from an external source
TypographyHeroUI · ReactPrimitive typography component for rendering styled text with semantic type variants.
Animated Gradient TextMagic UI · ReactAn animated gradient background which transitions between colors for text.
BlockquoteRadix Themes · React
Gradient HeadingCult UI · ReactHeading component with gradient text effects and customizable styling
HighlightArk UI · ReactUsed to emphasize specific words or phrases within a larger body of text.
Decrypt RevealCanvas UI · ReactUI encrypted into ASCII, decoded by the cursor.
Text and highlight colorsReUI · ReactEditor toolbar buttons with preset palettes and a way back to the default color.
Headingpdfcn · ReactHeading PDF component (forme)
Apple Text RevealAmicro Micro Transitions · ReactApple Text Reveal loading animation.
ShimmerAI Elements · ReactAn animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
CodePark UI · ReactA typography component for displaying inline code snippets.
MarkdownLobe UI · ReactMarkdown is a React component used to render markdown text. It supports various markdown syntax such as headings…
AI Text LoadingKokonut UI · ReactAI thinking text with a soft wave through the letters and words that swap letter by letter.
Text FlagCursify · React
headingIntent UI · Reactheading
Text CascadebeUI · ReactLetter-by-letter slot roll for standalone text — the old letters drop away as the new ones land, left to right. Same…
Gravity LettersRare UI · ReactA playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
Heading With AnchorSpectrum UI · Reactcomponent for the Heading With Anchor
Blur RevealSpell UI · ReactAnimated text reveal with blur effect.
Cyber Glitch TextVengeance UI · ReactText with a cyberpunk glitch: split colour channels and jittering slices.
Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
Control Section TitleToolcraft · React
Circular TextPanel UI · React NativeText set around a circle, turning.
Animated Text-01 - Shiny TextShadcn Space · ReactAnimated Text component
Circle CreditsPixel Perfect · ReactTwo credit columns that wrap a round hole, easing in from the centre and scrambling into symbols on hover.
Text LoaderOpenSourceUI · ReactAnimated text loader with a spinning color orb and staggered letter pulses. Pass text, variant, and textColor to match…
Perspective Text Scrolluselayouts · ReactA polished example interaction built with React and Motion.- Template CopyBoardUI · React
Annotated TextComponentry · ReactHand-drawn marks — circles, highlights, underlines, cross-outs — sketched around inline text.
Blur RevealBadtz UI · ReactA text component that reveals its content with a smooth blur-to-focus animation, activated by default when the text…
Flip TextObsidianUI · ReactText whose letters flip over in sequence to reveal the content.
AI Overview ContentNotra · ReactParagraph, heading, list and link styles for AI Overview answers.
Split Line Fly InGreatUI · ReactText split into lines that fly in one after another.
Dia TextNexvyn UI · ReactDiagonal clip-path reveal for bold display typography. Text sweeps into view with an angled edge as the component…
Text RevealForge UI · ReactA stylish effect that sequentially fades in text on page load, creating a dynamic reveal.
HighlightShark UI · ReactHighlight search terms within text.
Character Scramble TextRewamp UI · ReactText whose characters scramble through random glyphs before settling on the final letters.
Streaming TextAI CSS · React
ASCII Logo23rd.dev · ReactInteractive ASCII wordmark: glyphs shove away from the cursor, then click-cycle through scatter, gravity drop, and…
SpinningTextSona UI · ReactThe `SpinningText` component is a dynamic and visually engaging UI element that animates text in a circular spinning…
Radial IntroWatermelon UI · React
Expandable textArc Library · ReactLong text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown…
Highlight Phraseglasscn · ReactA smooth glass hover popover for text, video, and rich content, with click and keyboard access.
Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
Synced Transcript ViewerLocalMode · ReactA karaoke-style transcript viewer that highlights words in lockstep with audio playback using word-level alignment…
Article HeadingsCojeev UI · ReactSemantic article headings resolve through a brief, grapheme-safe noise frontier.
Staggered Letter Text SwapMicroKit · ReactA surface-free text interaction with a staggered per-letter upward replacement.
Animated Gradient TextVelora UI · ReactBrand gradient sweeping continuously through text.
Pixelated TextAtelier UI · React
CaptionHalaska UI · React
Copy Paste PadPin UI · React
Blur Reveal TextSpaceUI · ReactA progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport…
Aria MarkerReScript shadcn · ReScript
Scroll Reveal TextSkecher UI · ReactA scroll-linked text reveal with spring-smoothed progress and reduced-motion support.
Dia Text RevealSora UI · ReactA gradient sweep that reveals text with a chromatic wash, powered by Motion.
Dot Matrix Cascade TypographyCue Foundations · React
MarkerD2Studio UI · ReactA small inline marker for flagging state, such as unread, new or pinned.
Gradient TextEaseUI · ReactText filled with a slowly drifting rainbow. It pauses while off screen and holds still when reduced motion is on.
Glass TextOpaline · ReactHeadlines cast in liquid glass — every glyph is a bevelled lens with rim light and a travelling sheen.
Annotated TextFibo · ReactHand-drawn marks on a word or phrase, from underlines and circles to a highlighter, plus sticker chips that can cycle…
Liquid TextReactFrame · ReactText distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity…
Container Text FlipAceternity UI · ReactBoxed word inside a sentence that flips through a list of words, with the box resizing to fit each one.
Formatark-cn · ReactShadcn-style format utilities (Byte, Time, RelativeTime) built with Ark UI primitives.
Dialog Content TextMUI / Material UI · React
Blur TextReact Bits · ReactText starts blurred then crisply resolves for a soft-focus reveal effect.
HeadingChakra UI · ReactUsed to render semantic HTML heading elements.
Animated Shiny TextMagic UI · ReactA light glare effect which pans across text making it appear as if it is shimmering.
HeadingRadix Themes · React
Pixel Heading CharacterCult UI · ReactPer-character pixel-font heading with four animation modes using Geist pixel fonts
FormatArk UI · React
Textpdfcn · ReactText PDF component (forme)
Blur TextAmicro Micro Transitions · ReactBlur transition for text container/headings.
TranscriptionAI Elements · ReactA composable component for displaying interactive, synchronized transcripts from AI SDK transcribe() results with…
Display ValuePark UI · ReactDisplay values with consistent fallback for empty values.
TextLobe UI · ReactBase UI-powered Text typography component with semantic types, formatting options, and single- or multi-line ellipsis…
Cradle TextKokonut UI · ReactA headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and…
Text Icon CursorCursify · React
textIntent UI · Reacttext
Text ScramblebeUI · ReactA controlled character scramble that resolves changed text while keeping its final value accessible.
Orbital LettersSpectrum UI · Reactcomponent for the Orbital Letters
Gradient Wave TextSpell UI · ReactApple-style animated gradient text with wave effect.
Flip Fade TextVengeance UI · ReactWord flip and fade cycle
Panel HeaderToolcraft · React
MarkerPanel UI · React NativeInline note between conversation turns.
Animated Text-02 - Gradient TextShadcn Space · ReactAnimated Gradient Text component
Flip Text RevealPixel Perfect · ReactA GSAP Flip orb transition followed by a staggered word reveal.
Annotated TextOpenSourceUI · React
Stacked Outline Textuselayouts · ReactHeavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.
Flipping Word SwapComponentry · ReactA clean character-by-character flip between two words on interaction.
Fade Up WordBadtz UI · ReactA text component that reveals its content with a smooth fade-up animation, activated by default when the text enters…
Text StreamObsidianUI · ReactA continuous vertical text stream changes speed and direction with your scroll.
AI Overview HeaderNotra · ReactThe sparkle icon and AI Overview heading.
Text On Path ScrollGreatUI · ReactText laid along a curved SVG path that moves along it as the page scrolls.
Text ShimmerForge UI · ReactA React component that creates an animated text shimmer effect using Motion, customizable by tag, duration, spread…
ProseShark UI · ReactTypography styles for HTML content.
Flip 3 D TextRewamp UI · ReactText whose letters flip in 3D around their axis.
Text ResponseAI CSS · React
Split TextSona UI · ReactSplits text into characters, words, or lines and reveals them with a staggered, optionally scroll-triggered animation.
Text GradientWatermelon UI · React
In-view titleArc Library · ReactBring a section title in as it scrolls into view.
Highlight Textglasscn · ReactInline text highlight with preset color variants and custom background class support.
Directional UnderlineUI Lab · ReactThe underline comes in from the side your cursor entered and leaves toward the side it left.
Document QA BlockLocalMode · ReactExtractive question answering (Xenova/distilbert-base-cased-distilled-squad, grounding corpus context via…
Caret SwapCojeev UI · ReactA colored caret block consumes a phrase before typing its replacement in whole graphemes.
View More Text SwapMicroKit · ReactA borderless View More label that swaps vertically on hover.
Flip WordsVelora UI · ReactCycles words with a springy blur-flip transition.
Text BounceAtelier UI · React
Card HeaderHalaska UI · React
Doodle CalloutSpaceUI · ReactA hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
Base MarkerReScript shadcn · ReScript
Snap TextSkecher UI · ReactA spring-driven text interaction that reacts to pointer movement and settles cleanly.
Fog Text RevealSora UI · ReactInline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles…
Metallic ShimmerD2Studio UI · ReactBrushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content…
Streaming TextEaseUI · ReactReveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's…
Text Scramble ProReactFrame · ReactCycling phrases that decrypt from scrambled characters into readable text, left-to-right, right-to-left, or random…
Flip WordsAceternity UI · ReactWord inside a sentence that is replaced by the next one of a list, letters blurring out and in.