API Reference

Complete reference for all Shimmer component props and configuration options.

Shimmer Component Props

Prop	Type	Default	Description
`loading`	`boolean`	`true`	Whether to show shimmer effect or actual content
`children`	`Component Children`	required	The content to render/measure (Slot/Children)
`shimmerColor`	`string`	`'rgba(255,255,255,0.15)'`	Color of the shimmer wave
`backgroundColor`	`string`	`'rgba(255,255,255,0.08)'`	Background color of shimmer blocks
`duration`	`number`	`1.5`	Animation duration in seconds
`fallbackBorderRadius`	`number`	`4`	Border radius (px) for elements with no CSS border-radius
`templateProps`	`Record<string, unknown>`	-	Props to inject into first child for skeleton rendering

Example with All Props

<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user || userTemplate} settings={settings} />
</Shimmer>

<Shimmer
  :loading="isLoading"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  :duration="2"
  :fallbackBorderRadius="8"
  :templateProps="{
    user: userTemplate,
    settings: settingsTemplate,
  }"
>
  <MyComponent :user="user || userTemplate" :settings="settings" />
</Shimmer>

<Shimmer
  loading={isLoading}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user || userTemplate} {settings} />
</Shimmer>

<Shimmer
  loading={isLoading()}
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  duration={2}
  fallbackBorderRadius={8}
  templateProps={{
    user: userTemplate,
    settings: settingsTemplate,
  }}
>
  <MyComponent user={user() || userTemplate} settings={settings} />
</Shimmer>

<shimmer
  [loading]="isLoading()"
  shimmerColor="rgba(255, 255, 255, 0.2)"
  backgroundColor="rgba(255, 255, 255, 0.1)"
  [duration]="2"
  [fallbackBorderRadius]="8"
  [templateProps]="{
    user: userTemplate,
    settings: settingsTemplate,
  }"
>
  <app-my-component [user]="user() || userTemplate" [settings]="settings" />
</shimmer>

Global Configuration

All frameworks support global configuration through their respective context/provider patterns.

React

import { ShimmerProvider } from '@shimmer-from-structure/react';

<ShimmerProvider config={{ shimmerColor: '...', ... }}>
  <App />
</ShimmerProvider>

Vue

import { provideShimmerConfig } from '@shimmer-from-structure/vue';

provideShimmerConfig({ shimmerColor: '...', ... });

Svelte

import { setShimmerConfig } from '@shimmer-from-structure/svelte';

setShimmerConfig({ shimmerColor: '...', ... });

Angular

import { provideShimmerConfig } from '@shimmer-from-structure/angular';

bootstrapApplication(AppComponent, {
  providers: [provideShimmerConfig({ shimmerColor: '...', ... })],
});

SolidJS

import { ShimmerProvider } from '@shimmer-from-structure/solid';

<ShimmerProvider config={{ shimmerColor: '...', ... }}>
  <App />
</ShimmerProvider>

Configuration Object

Property	Type	Default	Description
`shimmerColor`	`string`	`'rgba(255,255,255,0.15)'`	Global shimmer wave color
`backgroundColor`	`string`	`'rgba(255,255,255,0.08)'`	Global background color for shimmer blocks
`duration`	`number`	`1.5`	Global animation duration in seconds
`fallbackBorderRadius`	`number`	`4`	Global fallback border radius in pixels

Accessing Configuration

Each framework provides a way to access the current configuration:

React: useShimmerConfig()
Vue: useShimmerConfig()
Svelte: getShimmerConfig()
Angular: injectShimmerConfig()
SolidJS: useShimmerConfig()

HTML Attribute Controls

Control shimmer behavior at the element level using HTML data attributes. These attributes provide fine-grained control over which elements are measured and how they are rendered during the loading state.

Attribute	Description	Use Case
`data-shimmer-ignore`	Excludes the element and all its descendants from shimmer measurement and rendering. Elements with this attribute remain visible during loading (text and media are not hidden).	Live indicators, badges, static labels, or any content that should remain visible during loading
`data-shimmer-no-children`	Treats the element as a single shimmer block. The library does not recurse into its children and uses the element's own bounding rect for the overlay.	Complex nested structures where you want a single unified shimmer block instead of multiple child blocks

Example Usage

<Shimmer loading={loading}>
  <div className="card">
    {/* This badge stays visible during loading */}
    <span className="badge" data-shimmer-ignore>
      LIVE
    </span>
    
    <h2>Card Title</h2>
    <p>Card content that will be shimmered</p>
    
    {/* This entire row becomes one shimmer block */}
    <div className="metric-row" data-shimmer-no-children>
      <span>Views: 1,234</span>
      <span>Likes: 567</span>
      <span>Shares: 89</span>
    </div>
  </div>
</Shimmer>

<Shimmer :loading="loading">
  <div class="card">
    <!-- This badge stays visible during loading -->
    <span class="badge" data-shimmer-ignore>
      LIVE
    </span>
    
    <h2>Card Title</h2>
    <p>Card content that will be shimmered</p>
    
    <!-- This entire row becomes one shimmer block -->
    <div class="metric-row" data-shimmer-no-children>
      <span>Views: {{ views }}</span>
      <span>Likes: {{ likes }}</span>
      <span>Shares: {{ shares }}</span>
    </div>
  </div>
</Shimmer>

<Shimmer loading={loading}>
  <div class="card">
    <!-- This badge stays visible during loading -->
    <span class="badge" data-shimmer-ignore>
      LIVE
    </span>
    
    <h2>Card Title</h2>
    <p>Card content that will be shimmered</p>
    
    <!-- This entire row becomes one shimmer block -->
    <div class="metric-row" data-shimmer-no-children>
      <span>Views: {views}</span>
      <span>Likes: {likes}</span>
      <span>Shares: {shares}</span>
    </div>
  </div>
</Shimmer>

<Shimmer loading={loading()}>
  <div class="card">
    {/* This badge stays visible during loading */}
    <span class="badge" data-shimmer-ignore>
      LIVE
    </span>
    
    <h2>Card Title</h2>
    <p>Card content that will be shimmered</p>
    
    {/* This entire row becomes one shimmer block */}
    <div class="metric-row" data-shimmer-no-children>
      <span>Views: {views()}</span>
      <span>Likes: {likes()}</span>
      <span>Shares: {shares()}</span>
    </div>
  </div>
</Shimmer>

<shimmer [loading]="loading()">
  <div class="card">
    <!-- This badge stays visible during loading -->
    <span class="badge" data-shimmer-ignore>
      LIVE
    </span>
    
    <h2>Card Title</h2>
    <p>Card content that will be shimmered</p>
    
    <!-- This entire row becomes one shimmer block -->
    <div class="metric-row" data-shimmer-no-children>
      <span>Views: {{ views() }}</span>
      <span>Likes: {{ likes() }}</span>
      <span>Shares: {{ shares() }}</span>
    </div>
  </div>
</shimmer>

TypeScript Support

All packages include full TypeScript definitions. Import types as needed:

import type { ShimmerProps, ShimmerConfig } from 'shimmer-from-structure';