saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Text Shimmer

Text Shimmer

Shimmering text effect for loading states or emphasis.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/text-shimmer.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { TextShimmer } from "@/components/ui/text-shimmer"
<TextShimmer>Loading...</TextShimmer>

Examples

Custom Colors

Loading...
Custom color shimmer.

Durations

Loading...
Fast, default, slow.

Custom Spread

Loading...
Narrow, default, wide.

Large Text

Loading...
Large heading shimmer.

API Reference

PropTypeDefaultDescription
children*string—The text to shimmer.
durationnumber2Animation duration in seconds.
PreviousText EffectNextTextarea

On This Page

  • Installation
  • Usage
  • Examples
  • Custom Colors
  • Durations
  • Custom Spread
  • Large Text
  • API Reference

Shimmering Text

A beautiful loading effect for headlines

Blue Shimmer

Purple Shimmer

Orange Shimmer

Fast (0.8s)

Quick shimmer effect

Default (2s)

Default shimmer speed

Slow (4s)

Slow and elegant shimmer

Narrow (spread: 1)

Narrow shimmer width

Default (spread: 2)

Default shimmer width

Wide (spread: 4)

Wide shimmer width

Big Bold Shimmer

A subtitle with matching shimmer effect