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()

TypeScript Support

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

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