Bring your own taste

Styling

The default stylesheet is class-based, small, and designed to be overridden.

Skeleton shimmer

The default skeleton is a polished, wide-gradient shimmer. Customise it with CSS variables: --ribif-skeleton-bg, --ribif-shimmer-color, --ribif-shimmer-speed. It respects reduced-motion preferences automatically.

tsx

<Image
  src="/images/home/feature3.jpg"
  alt="Skeleton shimmer styling demo"
  width={1080}
  height={720}
  placeholder="skeleton"
  fadeType="zoom-blur"
  placeholderStyle={{
    '--ribif-skeleton-bg': '#111318',
    '--ribif-skeleton-highlight': '#242936',
    '--ribif-skeleton-accent': 'rgb(255 61 129 / 38%)',
    '--ribif-shimmer-speed': '1.1s'
  }}
/>

Typed skeleton themes

Use the skeleton prop when you want component-level control without writing custom CSS.

tsx

<Image
  src="/images/home/feature2.jpg"
  alt="Typed skeleton theme demo"
  width={1080}
  height={720}
  placeholder="skeleton"
  fadeType="soft-reveal"
  skeleton={{
    baseColor: '#111318',
    highlightColor: '#242936',
    accentColor: 'rgb(255 61 129 / 38%)',
    sheenColor: 'rgb(255 255 255 / 76%)',
    speed: 1100,
    angle: 118,
    size: '62%',
    radius: 18
  }}
/>

Useful classes

Target .ribif-root, .ribif-image, .ribif-background, .ribif-placeholder, .ribif-placeholder-skeleton, .ribif-placeholder-blur, and .ribif-placeholder-color.