saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor
Docs/Components/Text Shimmer

Text Shimmer

Shimmering text effect for loading states or emphasis.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation-ui/text-shimmer

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. 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