Text blink

TextBlink fades a short line of copy in place. It works best for save states, temporary connectivity issues, live-edit indicators, and any label that should stay readable while still showing activity.

import { TextBlink } from "@/components/loading-ui/text-blink";

export function TextBlinkDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/text-blink
Copy

Usage

Copyimport { TextBlink } from "@/components/loading-ui/text-blink";

Copy<TextBlink>Thinking</TextBlink>

Customization

TextBlink renders as a paragraph by default, but as="span" is usually the right choice inside buttons, badges, and other inline shadcn components.

Color

The component inherits text color, so you can style it with normal foreground utilities.

import { TextBlink } from "@/components/loading-ui/text-blink";

export function TextBlinkColor() {

Duration

Set --duration to make the fade feel more urgent or calmer for background saves.

import { TextBlink } from "@/components/loading-ui/text-blink";

export function TextBlinkDuration() {

Opacity

Use minOpacity to decide how strongly the text fades at the midpoint.

import { TextBlink } from "@/components/loading-ui/text-blink";

export function TextBlinkOpacity() {

Examples

These examples keep the blinking copy short and functional. Longer sentences are harder to read when the full line is fading.

Button

Use inline rendering so the animated label sits cleanly inside the button.

import { Button } from "@/components/ui/button";
import { TextBlink } from "@/components/loading-ui/text-blink";

Badge

Blinking badges work best for live or autosave states that should remain easy to scan.

import { Badge } from "@/components/ui/badge";
import { TextBlink } from "@/components/loading-ui/text-blink";

Alert

Alerts are useful when the blinking title needs a short explanation below it.

import {
  Alert,
  AlertDescription,

Tabs

Tabbed views can isolate active draft or sync states without changing the rest of the workspace.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TextBlink } from "@/components/loading-ui/text-blink";