@dinefy/react-shimmer

Modern loading skeleton component with smooth shimmer animation. Flexible and customizable via className and style props.

Installation

npm install @dinefy/react-shimmer

Usage

Basic Usage

import { Shimmer } from "@dinefy/react-shimmer";

<Shimmer.Root className="h-4 w-48" />

Multiple Lines

<div className="flex flex-col gap-4 w-80">
  <Shimmer.Root className="h-4 w-full" />
  <Shimmer.Root className="h-4 w-3/4" />
  <Shimmer.Root className="h-4 w-1/2" />
</div>

Circle Avatar

<Shimmer.Root className="h-16 w-16 rounded-full" />

Card Variant

<Shimmer.Root variant="card" className="w-80 rounded-xl">
  <div className="h-40 w-full bg-black/5 rounded-lg" />
  <div className="h-4 w-3/4 bg-black/5 rounded" />
  <div className="h-3 w-1/2 bg-black/5 rounded" />
</Shimmer.Root>

Profile Card Example

<Shimmer.Root variant="card" className="w-80 rounded-xl">
  <div className="flex items-center gap-3">
    <div className="h-12 w-12 bg-black/5 rounded-full" />
    <div className="flex-1 space-y-2">
      <div className="h-4 w-32 bg-black/5 rounded" />
      <div className="h-3 w-24 bg-black/5 rounded" />
    </div>
  </div>
  <div className="space-y-2 mt-4">
    <div className="h-3 w-full bg-black/5 rounded" />
    <div className="h-3 w-5/6 bg-black/5 rounded" />
  </div>
</Shimmer.Root>

API Reference

Shimmer.Root

Props

• variant?: "base" | "card" - Default: "base"
  • base: Used for isolated elements
  • card: Used as background shimmer for cards with internal content
• className?: string - Custom CSS classes (Tailwind utilities)
• style?: CSSProperties - Inline styles
• children?: ReactNode - Content to display inside (mainly for card variant)

Extends all HTML div element props.

Features

• Smooth Animation: Continuous shimmer effect using gradient animation
• Flexible Sizing: No fixed dimensions - control via className or style
• Responsive: Adapts to container size
• Token-based: Uses design system tokens for colors, radius, spacing, and motion
• Tailwind-friendly: Easy customization with utility classes
• TypeScript: Full type safety

Dependencies

This component requires:

• @dinefy/theme-web
• @vanilla-extract/css
• @vanilla-extract/recipes